import { Textarea } from '@/components';
import ReviewCard from '@/components/Cards/ReviewsCard';
import CustomModal from '@/components/CustomModal';
import Button from '@/components/ui/Button';
import ShareModal from '@/components/ui/ShareModal';
import Head from 'next/head';
import { useState } from 'react';
import { Form } from 'react-bootstrap';
import { Rating } from 'react-simple-star-rating';
import style from './index.module.scss';

const MyReview = () => {
  const [editReview, setEditReview] = useState<boolean>(false);
  const [shareModal, setShareModal] = useState<boolean>(false);

  const [rating, setRating] = useState(0);

  // Catch Rating value
  const handleRating = (rate: number) => {
    setRating(rate);

    // other logic
  };
  // Optinal callback functions
  const onPointerEnter = () => console.log('Enter');
  const onPointerLeave = () => console.log('Leave');
  const onPointerMove = (value: number, index: number) =>
    console.log(value, index);

  return (
    <>
      <Head>
        <title>My Reviews | Deliver X</title>
      </Head>
      <div className="d-flex mt-3 justify-content-start align-items-center">
        <h3 className="mb-0 pb-0 fw-bold">My Reviews</h3>
      </div>

      <div className={`${style.reviewCard} mt-3`}>
        {[...Array(2)].map((item, index) => (
          <ReviewCard
            setEditReview={setEditReview}
            setShareModal={setShareModal}
            key={index}
          />
        ))}
      </div>

      <CustomModal
        isCloseBtn
        show={editReview}
        handleClose={() => setEditReview(false)}
      >
        <div className="position-relative p-3">
          <h3 className="text-center position-relative modal-title fw-bold">
            Edit a Review
          </h3>

          <div className="text-center">
            <Rating
              onClick={handleRating}
              onPointerEnter={onPointerEnter}
              onPointerLeave={onPointerLeave}
              onPointerMove={onPointerMove}
              size={39}
            />
          </div>

          <Form.Group className="mt-3">
            <Form.Label className="ps-3">Review</Form.Label>
            <Textarea placeholder="Edit your review here" />
          </Form.Group>

          <div className="text-center">
            <Button
              onClick={() => setEditReview(false)}
              className="mt-3 btn btn-feature UrbanistRegular"
              size="md"
            >
              Update
            </Button>
          </div>
        </div>
      </CustomModal>

      <ShareModal show={shareModal} handleClose={() => setShareModal(false)} />
    </>
  );
};

export default MyReview;
