"use client";

import AppContext from "@ctx/AppContext";
import { useRouter } from "next/navigation";
import { useContext } from "react";
import { BottomSheet } from "react-spring-bottom-sheet";

const BottomSheetComment = ({
  handleCreateReview,
  name,
  content,
  setContent,
  handleStarClick,
  rate,
}) => {
  const CTX = useContext(AppContext);
  const router = useRouter();

  const renderStars = () => {
    return [...Array(5)].map((_, index) => {
      const value = index + 1;
      return (
        <svg
          key={index}
          onClick={() => handleStarClick(value)}
          xmlns="http://www.w3.org/2000/svg"
          fill={value <= rate ? "yellow" : "gray"}
          viewBox="0 0 24 24"
          strokeWidth={0.5}
          stroke="currentColor"
          className="w-8 h-8 cursor-pointer"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            d="M11.048 2.927c.3-.921 1.654-.921 1.954 0l1.614 4.958a1 1 0 00.95.69h5.204c.969 0 1.371 1.24.588 1.81l-4.205 3.053a1 1 0 00-.364 1.118l1.614 4.958c.3.921-.755 1.688-1.538 1.118L12 17.347l-4.205 3.053c-.783.57-1.838-.197-1.538-1.118l1.614-4.958a1 1 0 00-.364-1.118L3.302 10.385c-.783-.57-.38-1.81.588-1.81h5.204a1 1 0 00.95-.69l1.614-4.958z"
          />
        </svg>
      );
    });
  };

  return (
    <BottomSheet
      open={CTX.state.bottomSheetCommentOpen}
      onDismiss={() => CTX.setBottomSheetCommentOpen(false)}
      className={"z-50 relative "}
    >
      <div className="p-3 text-center">
        <p className="pb-3 mb-0 text-sm rtl">
          شما در حال اضافه کردن نظر برای <strong> {name} </strong> هستید
        </p>
      </div>

      <div className="px-4 pb-10 mt-5 rtl">
        <h3 className="text-sm">دیدگاه خود را وارد کنید</h3>
        <textarea
          className="mt-2 form-control"
          cols="30"
          rows="8"
          onChange={(e) => setContent(e.target.value)}
          value={content}
        />

        <div className="mt-4">
          <h3 className="mb-2 text-sm">امتیاز را انتخاب کنید</h3>
          <div className="flex">{renderStars()}</div>
        </div>
        <div className="flex justify-end" onClick={() => handleCreateReview()}>
          <button className="w-full py-3 mt-5 text-sm btn btn-primary rounded-3xl">
            ارسال دیدگاه (برای ارسال دیدگاه ابتدا باید ورود کنید)
          </button>
        </div>
      </div>
    </BottomSheet>
  );
};

export default BottomSheetComment;