"use client";

import { useRef, useState } from "react";
import Rating from "../common/rating";
import { useGSAP } from "@gsap/react";
import gsap from "gsap";

const WriteReview = () => {
  const [isShow, setIsShow] = useState<boolean>(false);
  const [rating, setRating] = useState<number>(0);
  const container = useRef<HTMLDivElement>(null);
  const cover = useRef<HTMLDivElement>(null);

  const tl = useRef<GSAPTween>();

  useGSAP(
    () => {
      tl.current = gsap.to(".cover", {
        height: cover.current!.scrollHeight,
        ease: "power4.inOut",
        reversed: true,
      });
    },
    { scope: container },
  );

  const handleShowWriteReview = () => {
    tl.current!.reversed(!tl.current!.reversed());
    setIsShow((prev) => !prev);
  };

  const handleRating = (id: number) => {
    setRating(id);
  };
  const handleRatingEnter = (id: number) => {
    setRating(id);
  };
  const handleRatingLeave = () => {
    setRating(0);
  };

  return (
    <div
      ref={container}
      className="flex flex-col items-center justify-center gap-4"
    >
      <div className="flex flex-col justify-center gap-4 lg:flex-row lg:gap-6">
        <div className="flex flex-col items-center justify-center">
          <Rating />
          <p className="text-center font-mono text-primary">
            Be the first to write a review
          </p>
        </div>
        <div className="hidden w-px bg-primary lg:block" />
        <button
          onClick={handleShowWriteReview}
          className="border border-primary bg-primary px-5 py-3 font-mono text-xl text-secondary"
        >
          {isShow ? "Cancel Review" : "Write a Review"}
        </button>
      </div>
      <div
        ref={cover}
        className="cover flex h-0 max-w-md flex-col gap-4 overflow-hidden lg:min-w-[448px]"
      >
        <div className="flex items-center gap-2">
          <h4 className="font-mono text-2xl font-bold">Rating:</h4>
          <div className="flex items-center">
            {[...Array(5)].map((_, index) => (
              <svg
                key={index}
                onMouseEnter={() => handleRatingEnter(index + 1)}
                onMouseLeave={handleRatingLeave}
                onClick={() => handleRating(index + 1)}
                className={`ms-1 h-7 w-7 transition-colors ${index < rating ? "text-yellow-300" : "text-gray-300"} cursor-pointer lg:h-8 lg:w-8`}
                aria-hidden="true"
                xmlns="http://www.w3.org/2000/svg"
                fill="currentColor"
                viewBox="0 0 22 20"
              >
                <path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" />
              </svg>
            ))}
          </div>
        </div>
        <input
          className="w-full border border-primary px-4 py-3 text-lg placeholder:text-primary/50 focus:outline-none"
          type="text"
          placeholder="Name"
        />
        <textarea
          className="min-h-52 w-full border border-primary px-4 py-3 text-lg placeholder:text-primary/50 focus:outline-none"
          rows={5}
          placeholder="Comment"
        />
        <input
          className="w-full cursor-pointer border border-primary text-lg file:border-none file:bg-primary file:px-4 file:py-3 file:font-mono file:text-secondary placeholder:text-primary/50 focus:outline-none"
          type="file"
          accept="image/*"
        />
      </div>
    </div>
  );
};

export default WriteReview;



fixed rating after click not stay rating