import React, { useState } from "react";
import "./Submit_Your_Review.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faStar as farStar } from "@fortawesome/free-regular-svg-icons";
import { faStar as fasStar } from "@fortawesome/free-solid-svg-icons";
import Rating from "react-rating";
import { Form } from "react-bootstrap";
import Green_btn from "../../../common-components/common_btn/green_btn/Green_btn";
import Success_Modal from "../../../common-components/common_modal/success_modal/Success_Modal";
import { useForm, Controller } from "react-hook-form";
import { useDispatch, useSelector } from "react-redux";
import { postRating } from "../../../../features/rating/ratingSlice";
import Set_New_Password_Modal from "../../../common-components/common_modal/set_new_password_modal/Set_New_Password_Modal";
import Reset_Password_Modal from "../../../common-components/common_modal/reset_password_modal/Reset_Password_Modal";
import Login_Modal from "../../../common-components/common_modal/login_modal/Login_Modal";
import {
  allReviewRating,
  AvgReviewRating,
} from "../../../../features/review_rating/review_ratingSlice";

function Submit_Your_Review({ product }) {
  const [modalShow, setModalShow] = React.useState(false);
  const [images, setImages] = useState([]);
  const [imagePreviews, setImagePreviews] = useState([]);

  const handleImageChange = (e) => {
    const files = Array.from(e.target.files);

    setImages(files);

    const previews = files.map((file) => ({
      file,
      url: URL.createObjectURL(file),
    }));

    setImagePreviews(previews);
  };
  const {
    register,
    handleSubmit,
    control,
    formState: { errors },
    reset,
  } = useForm({
    defaultValues: {
      name: "",
      email: "",
      review: "",
      rating: "",
    },
  });
  const dispatch = useDispatch();
  const onSubmit = async (d) => {
    const formData = new FormData();

    formData.append("ratings", d.ratings);
    formData.append("review", d.review);
    formData.append("product_id", product?.id);

    images.forEach((img, index) => {
      formData.append(`image${index}`, img);
    });

    formData.append("imageCount", images.length);

    const res = await dispatch(postRating(formData));

    if (res.meta?.requestStatus === "fulfilled") {
      setModalShow(true);
      reset();
      setImages([]);
      setImagePreviews([]);

      dispatch(
        AvgReviewRating({
          product_id: product.id,
        }),
      );

      dispatch(
        allReviewRating({
          product_id: product.id,
        }),
      );
    }
  };

  const isSignin = useSelector((state) => state.auth.is_signin);
  const [email, setEmail] = useState();
  const [contact, setContact] = useState();
  const [showResetModal, setShowResetModal] = useState(false);
  const [showSetPassModal, setShowSetPassModal] = useState(false);
  const [showSuccessModal, setShowSucsessModal] = useState(false);
  const [showAccountCreted, setShowAccountCreted] = useState(false);
  const [showLoginModal, setShowLoginModal] = useState(false);
  return (
    <>
      <section className="Submit_Your_Review">
        <div className="heading_holder">
          <div>
            <h4>Submit Your Review</h4>

            <p>Add Your Rating </p>

            <Controller
              name="ratings"
              control={control}
              rules={{ required: "Rating is required" }}
              render={({ field }) => (
                <div>
                  <Rating
                    {...field}
                    initialRating={field.value}
                    onChange={field.onChange}
                    emptySymbol={
                      <FontAwesomeIcon icon={farStar} color="#428bcf" />
                    }
                    fullSymbol={
                      <FontAwesomeIcon icon={fasStar} color="#428bcf" />
                    }
                    fractions={2}
                  />
                  {errors.ratings && (
                    <p className="text-danger mt-1">{errors.ratings.message}</p>
                  )}
                </div>
              )}
            />
          </div>
        </div>

        <div className="form_holder">
          <Form>
            <div className="row">
            

              <div className="col-md-12">
                <Form.Group className="input_group">
                  <input
                    type="file"
                    multiple
                    accept="image/*"
                    onChange={handleImageChange}
                  />
                </Form.Group>
                {imagePreviews.length > 0 && (
                  <div className="image_preview_holder">
                    {imagePreviews.map((preview, index) => (
                      <div className="image_preview_item" key={index}>
                        <img
                          src={preview.url}
                          alt={`Preview ${index + 1}`}
                          className="image_preview"
                        />
                      </div>
                    ))}
                  </div>
                )}
              </div>

              <div className="col-md-12">
                <Form.Group className="input_group">
                  <Form.Control
                    as="textarea"
                    rows={3}
                    placeholder="Write review..."
                    {...register("review", {
                      required: "Review is required",
                    })}
                  />
                  {errors.review && (
                    <p className="text-danger mt-1">{errors.review.message}</p>
                  )}
                </Form.Group>
              </div>
              {isSignin && (
                <div className="col-md-12">
                  <div className="btn_holder">
                    <Green_btn
                      btnText={"Submit Review"}
                      onClick={handleSubmit(onSubmit)}
                    />
                  </div>
                </div>
              )}
              {!isSignin && (
                <div className="col-md-12">
                  <div className="btn_holder">
                    <Green_btn
                      btnText={"Submit Review"}
                      onClick={() => {
                        setShowLoginModal(true);
                      }}
                    />
                  </div>
                </div>
              )}
            </div>
          </Form>
        </div>
      </section>

      <Login_Modal
        show={showLoginModal}
        onHide={() => {
          setShowLoginModal(false);
        }}
        setShowResetModal={() => setShowResetModal(true)}
        setShowAccountCreted={() => setShowAccountCreted(true)}
      />

      <Reset_Password_Modal
        email={email}
        setEmail={setEmail}
        contact={contact}
        setContact={setContact}
        show={showResetModal}
        onHide={() => {
          setShowResetModal(false);
        }}
        setShowSetPassModal={() => setShowSetPassModal(true)}
      />

      <Set_New_Password_Modal
        email={email}
        setEmail={setEmail}
        contact={contact}
        setContact={setContact}
        show={showSetPassModal}
        onHide={() => {
          setShowSetPassModal(false);
        }}
        setShowSucsessModal={() => setShowSucsessModal(true)}
      />

      <Success_Modal
        show={showSuccessModal}
        onHide={() => {
          setShowSucsessModal(false);
        }}
        successText="Password Reseted Successfully!"
      />

      <Success_Modal
        show={showAccountCreted}
        onHide={() => {
          setShowAccountCreted(false);
        }}
        successText="Account Created Successful!"
      />

      <Success_Modal
        show={modalShow}
        onHide={() => setModalShow(false)}
        successText="Submitted Successfully!"
      />
    </>
  );
}

export default Submit_Your_Review;
