import React, { FC, useState, useRef, useEffect } from 'react';
import Button from '../../blocks/Button';
import Form from '../../blocks/Form';
import Textarea from '../../blocks/Textarea';
import Rating from 'react-rating';
import css from './index.module.css';
import IconStarEmptySVG from '../../assets/icons/icon-star-empty.svg';
import IconStarFullSVG from '../../assets/icons/icon-star-full.svg';
import classnames from 'classnames';

export interface FormPartnerFeedbackValues {
  satisfiedServiceRating?: number;
  satisfiedServiceRatingReason?: string;
  partnerAppRating?: number;
  partnerAppRatingReason?: string;
  partnerPortalRating?: number;
  partnerPortalRatingReason?: string;
  recommendWorkRating?: number;
  recommendWorkRatingReason?: string;
  shareText?: string;
}

export interface FormPartnerFeedbackLabels {
  satisfiedServiceRatingText?: string;
  unhappy?: string;
  happy?: string;
  reasonTextareaText?: string;
  satisfiedServiceInfrastructureText?: string;
  partnerAppRatingText?: string;
  partnerPortalRatingText?: string;
  recommendWorkRatingText?: string;
  leastLikely?: string;
  mostLikely?: string;
  shareText?: string;
  otherText?: string;
  thanksText?: string;
  feedbackButton?: string;
}

export interface FormPartnerFeedbackErrors {
  satisfiedServiceRating: string;
  satisfiedServiceRatingReason: string;
  partnerAppRating: string;
  partnerAppRatingReason: string;
  partnerPortalRating: string;
  partnerPortalRatingReason: string;
  recommendWorkRating: string;
  recommendWorkRatingReason: string;
  shareText: string;
}

export interface FormPartnerFeedbackTouched {
  [key: string]: unknown;
}

export interface FormPartnerFeedbackProps {
  values: FormPartnerFeedbackValues;
  touched: FormPartnerFeedbackTouched;
  errors: FormPartnerFeedbackErrors;
  labels: FormPartnerFeedbackLabels;
  handleChange: (e) => void;
  handleBlur: (e) => void;
  handleSubmit: (e) => void;
  setFieldValue: (field, value) => void;
  isSubmitting?: boolean;
  status?: {
    msg: string;
  };
}

const FormPartnerFeedback: FC<FormPartnerFeedbackProps> = ({
  values,
  errors,
  handleChange,
  handleSubmit,
  labels,
  isSubmitting,
  setFieldValue,
}) => {
  const inputEl1 = useRef(null);
  const inputEl2 = useRef(null);
  const inputEl3 = useRef(null);
  const inputEl4 = useRef(null);
  const inputEl5 = useRef(null);
  const [isDisabled, setDisable] = useState(true);
  const [rating, setRating] = useState(0);
  const [satisfiedServiceRating, setSatisfiedServiceRating] = useState(0);
  const [partnerAppRating, setPartnerAppRating] = useState(0);
  const [partnerPortalRating, setPartnerPortalRating] = useState(0);

  const satisfiedServiceRatingChanged = (newRating): void => {
    setSatisfiedServiceRating(newRating);
    setFieldValue('satisfiedServiceRating', newRating);
  };

  const partnerAppRatingChanged = (newRating): void => {
    setPartnerAppRating(newRating);
    setFieldValue('partnerAppRating', newRating);
  };

  const partnerPortalRatingChanged = (newRating): void => {
    setPartnerPortalRating(newRating);
    setFieldValue('partnerPortalRating', newRating);
  };

  useEffect(() => {
    setDisable(Object.keys(errors).length != 0);
  }, [errors]);

  const createRatingButton = (value): JSX.Element => {
    value += 1;
    return (
      <li
        className={`${rating == value ? css.formPartnerFeedback__active : ''}`}
        key={value}
      >
        <Button
          handleClick={(): void => {
            setRating(value);
            setFieldValue('recommendWorkRating', value);
          }}
          size={'small'}
          variant={'tertiary'}
        >
          {value}
        </Button>
      </li>
    );
  };

  useEffect(() => {
    if (satisfiedServiceRating > 0) {
      inputEl1.current.focus();
    }
    if (partnerAppRating > 0) {
      inputEl2.current.focus();
    }
    if (partnerPortalRating > 0) {
      inputEl3.current.focus();
    }
    if (rating > 0) {
      inputEl4.current.focus();
    }
  }, [satisfiedServiceRating, partnerAppRating, partnerPortalRating, rating]);

  return (
    <Form onSubmit={handleSubmit} novalidate>
      <div className={css.formPartnerFeedback__contentWrap}>
        <h2 className={css.formPartnerFeedback__contentText}>
          {labels.satisfiedServiceRatingText}
        </h2>
        <div className={css.formPartnerFeedback__ratingBox}>
          <div className={css.formPartnerFeedback__ratingBoxtitle}>
            <div className={css.formPartnerFeedback__ratingUnhappytext}>
              {labels.unhappy}
            </div>
            <div className={css.formPartnerFeedback__ratingHappytext}>
              {labels.happy}
            </div>
          </div>
        </div>
        <div
          className={css.formPartnerFeedback__ratingStarbox}
          id="satisfiedServiceRating"
        >
          <Rating
            direction={'ltr'}
            initialRating={satisfiedServiceRating}
            emptySymbol={
              <IconStarEmptySVG className={css.formPartnerFeedback__star} />
            }
            fullSymbol={
              <IconStarFullSVG className={css.formPartnerFeedback__star} />
            }
            onClick={satisfiedServiceRatingChanged}
          />
        </div>
        {satisfiedServiceRating > 0 && (
          <div className={css.formPartnerFeedback__input}>
            <Textarea
              style={'booking'}
              label={labels.reasonTextareaText}
              initialRows={2}
              name={'satisfiedServiceRatingReason'}
              onChange={handleChange}
              value={values.satisfiedServiceRatingReason}
              inputRef={inputEl1}
              required={false}
              placeholder={labels.reasonTextareaText}
              optional={true}
            />
          </div>
        )}
      </div>
      <div className={css.formPartnerFeedback__contentWrap}>
        <h2 className={css.formPartnerFeedback__contentText}>
          {labels.satisfiedServiceInfrastructureText}
          <div className={css.formPartnerFeedback__optional}>(Optional)</div>
        </h2>
        <div className={css.formPartnerFeedback__partnerApp}>
          <div className={css.formPartnerFeedback__appText}>
            {labels.partnerAppRatingText}
          </div>
          <div className={css.formPartnerFeedback__ratingBox}>
            <div className={css.formPartnerFeedback__ratingBoxtitle}>
              <div className={css.formPartnerFeedback__ratingUnhappytext}>
                {labels.unhappy}
              </div>
              <div className={css.formPartnerFeedback__ratingHappytext}>
                {labels.happy}
              </div>
            </div>
          </div>
          <div
            className={css.formPartnerFeedback__ratingStarbox}
            id="partnerAppRating"
          >
            <Rating
              direction={'ltr'}
              initialRating={partnerAppRating}
              emptySymbol={
                <IconStarEmptySVG className={css.formPartnerFeedback__star} />
              }
              fullSymbol={
                <IconStarFullSVG className={css.formPartnerFeedback__star} />
              }
              onClick={partnerAppRatingChanged}
            />
          </div>
          {partnerAppRating > 0 && (
            <div className={css.formPartnerFeedback__input}>
              <Textarea
                style={'booking'}
                label={labels.reasonTextareaText}
                initialRows={2}
                name={'partnerAppRatingReason'}
                onChange={handleChange}
                value={values.partnerAppRatingReason}
                inputRef={inputEl2}
                required={false}
                placeholder={labels.reasonTextareaText}
                optional={true}
              />
            </div>
          )}
        </div>
        <div className={css.formPartnerFeedback__partnerApp}>
          <div className={css.formPartnerFeedback__appText}>
            {labels.partnerPortalRatingText}
          </div>
          <div className={css.formPartnerFeedback__ratingBox}>
            <div className={css.formPartnerFeedback__ratingBoxtitle}>
              <div className={css.formPartnerFeedback__ratingUnhappytext}>
                {labels.unhappy}
              </div>
              <div className={css.formPartnerFeedback__ratingHappytext}>
                {labels.happy}
              </div>
            </div>
          </div>
          <div
            className={css.formPartnerFeedback__ratingStarbox}
            id="partnerPortalRating"
          >
            <Rating
              direction={'ltr'}
              initialRating={partnerPortalRating}
              emptySymbol={
                <IconStarEmptySVG className={css.formPartnerFeedback__star} />
              }
              fullSymbol={
                <IconStarFullSVG className={css.formPartnerFeedback__star} />
              }
              onClick={partnerPortalRatingChanged}
            />
          </div>
          {partnerPortalRating > 0 && (
            <div className={css.formPartnerFeedback__input}>
              <Textarea
                style={'booking'}
                label={labels.reasonTextareaText}
                initialRows={2}
                name={'partnerPortalRatingReason'}
                onChange={handleChange}
                value={values.partnerPortalRatingReason}
                inputRef={inputEl3}
                required={false}
                placeholder={labels.reasonTextareaText}
                optional={true}
              />
            </div>
          )}
        </div>
      </div>
      <div className={css.formPartnerFeedback__contentWrap}>
        <h2 className={css.formPartnerFeedback__contentText}>
          {labels.recommendWorkRatingText}
          <div className={css.formPartnerFeedback__optional}>(Optional)</div>
        </h2>
        <div className={css.formPartnerFeedback__likeBox}>
          <div className={css.formPartnerFeedback__leastLikely}>
            {'1 - ' + labels.leastLikely}
          </div>
          <div className={css.formPartnerFeedback__mostLikely}>
            {'10 - ' + labels.mostLikely}
          </div>
        </div>
        <div className={css.formPartnerFeedback__ratingNumber}>
          <ul>
            {Array(10)
              .fill(1)
              .map((el, i) => createRatingButton(i))}
          </ul>
        </div>
        {rating > 0 && (
          <div className={css.formPartnerFeedback__input}>
            <Textarea
              style={'booking'}
              label={labels.reasonTextareaText}
              initialRows={2}
              name={'recommendWorkRatingReason'}
              onChange={handleChange}
              value={values.recommendWorkRatingReason}
              inputRef={inputEl4}
              required={false}
              placeholder={labels.reasonTextareaText}
              optional={true}
            />
          </div>
        )}
      </div>
      <div className={css.formPartnerFeedback__contentWrap}>
        <div className={css.formPartnerFeedback__contentText}>
          {labels.shareText}
        </div>
        <div className={css.formPartnerFeedback__input}>
          <Textarea
            style={'booking'}
            label={labels.otherText}
            initialRows={2}
            name={'shareText'}
            onChange={handleChange}
            value={values.shareText}
            inputRef={inputEl5}
            required={true}
            placeholder={labels.otherText}
            optional={true}
          />
        </div>
      </div>
      <div className={css.formPartnerFeedback__contentWrap}>
        <h2 className={css.formPartnerFeedback__contentThankstext}>
          {labels.thanksText}
        </h2>
        <div className={css.formPartnerFeedback__submit}>
          <Button type="submit" disabled={isDisabled || isSubmitting}>
            {!isSubmitting ? (
              <>{labels.feedbackButton}</>
            ) : (
              <>
                <span
                  className={classnames([
                    css.loading__dot,
                    css.loading__dotOne,
                  ])}
                />
                <span
                  className={classnames([
                    css.loading__dot,
                    css.loading__dotTwo,
                  ])}
                />
                <span
                  className={classnames([
                    css.loading__dot,
                    css.loading__dotThree,
                  ])}
                />
              </>
            )}
          </Button>
        </div>
      </div>
    </Form>
  );
};

export default FormPartnerFeedback;