import React, { useEffect } from "react";
import PropTypes from "prop-types";
import {
  FirstStepCreateReviewContainer,
  CreateReviewTitle,
  ProfileImage,
  ProfileImageContainer,
  ProfileName,
  FieldLabel,
  SelectField,
  SelectOption,
  CommentField,
} from "./FirstStepCreateReview.styled";
import { useTranslation } from "react-i18next";
import LittleOfferCard from "../../Cards/LittleOfferCard/LittleOfferCard";
import { reviewEnum } from "../../../enums/reviewEnum";
import { NextButton } from "../CreateReview.styled";
import selectedTheme from "../../../themes";
import { useFormik } from "formik";
import * as Yup from "yup";
import useScreenDimensions from "../../../hooks/useScreenDimensions";

const FirstStepCreateReview = (props) => {
  const offer = props.offer;
  const interlocutor = props.interlocutor;
  const dimensions = useScreenDimensions();
  const { t } = useTranslation();
  const handleSubmit = (values) => {
    props.goToNextStep(values);
  };

  useEffect(() => {
    if (props.informations?.exchangeSucceed) {
      formik.setFieldValue(
        "exchangeSucceed",
        props.informations?.exchangeSucceed
      );
      formik.setFieldValue(
        "correctCommunication",
        props.informations?.correctCommunication
      );
      formik.setFieldValue("comment", props.informations?.comment);
    }
  }, [props.informations]);

  const formik = useFormik({
    initialValues: {
      exchangeSucceed: reviewEnum.YES.mainText,
      correctCommunication: reviewEnum.YES.mainText,
      comment: "",
    },
    validationSchema: Yup.object().shape({
      comment: Yup.string().min(5, t("reviews.commentError")),
    }),
    onSubmit: handleSubmit,
    validateOnBlur: true,
    enableReinitialize: true,
  });

  return (
    <FirstStepCreateReviewContainer
      component="form"
      onSubmit={formik.handleSubmit}
    >
      <CreateReviewTitle>{t("reviews.modalTitle")}</CreateReviewTitle>
      <ProfileImageContainer>
        <ProfileImage src={interlocutor.image} />
      </ProfileImageContainer>
      <ProfileName>{interlocutor.name}</ProfileName>
      <LittleOfferCard
        image={offer?.images[0]}
        name={offer?.name}
        categoryName={offer?.category?.name}
      />
      <FieldLabel
        leftText={t("reviews.isCorrectCommunication").toUpperCase()}
      />
      <SelectField
        defaultValue={formik.values.correctCommunication}
        onChange={(event) =>
          formik.setFieldValue("correctCommunication", event.target.value)
        }
      >
        {Object.keys(reviewEnum).map((property) => (
          <SelectOption
            key={reviewEnum[property].value}
            value={reviewEnum[property].mainText}
          >
            {reviewEnum[property].mainText}
          </SelectOption>
        ))}
      </SelectField>

      <FieldLabel leftText={t("reviews.hasExchangeSucceed").toUpperCase()} />
      <SelectField
        defaultValue={formik.values.exchangeSucceed}
        onChange={(event) =>
          formik.setFieldValue("exchangeSucceed", event.target.value)
        }
      >
        {Object.keys(reviewEnum).map((property) => {
          if (property === "NOT_BAD") return;
          return (
            <SelectOption
              key={reviewEnum[property].value}
              value={reviewEnum[property].mainText}
            >
              {reviewEnum[property].mainText}
            </SelectOption>
          );
        })}
      </SelectField>

      <FieldLabel leftText={t("reviews.comment")} />
      <CommentField
        fullWidth
        multiline
        minRows={4}
        value={formik.values.comment}
        name="comment"
        onChange={formik.handleChange}
        height={dimensions.width < 600 ? "64px" : "100px"}
      />

      <NextButton
        variant="contained"
        buttoncolor={selectedTheme.primaryPurple}
        fullWidth
        height="48px"
        type="submit"
        disabled={formik.values.comment?.length < 5}
      >
        {t("common.continue")}
      </NextButton>
    </FirstStepCreateReviewContainer>
  );
};

FirstStepCreateReview.propTypes = {
  children: PropTypes.node,
  offer: PropTypes.any,
  interlocutor: PropTypes.any,
  goToNextStep: PropTypes.func,
  informations: PropTypes.shape({
    exchangeSucceed: PropTypes.string,
    correctCommunication: PropTypes.string,
    comment: PropTypes.string,
  }),
};

export default FirstStepCreateReview;
