import React, { FC, ReactType, useEffect, useState } from 'react';
import css from '../ConfirmationPage/index.module.css';
import bookingCSS from '../BookingFunnel/index.module.css';
import { Button, Link, LinkProps } from '../../index';
import LogoRawSVG from '../../assets/icons/logo-raw.svg';
import Textarea from '../../blocks/Textarea';
import { RegisterModal } from '../../helpers/bookingFunnelHelper';
import ReactModal from 'react-modal';

export interface ConfirmationPageProps {
  logoLink?: LinkProps;
  translations: {
    title: string;
    trust: string;
    subtitle: string;
    bookingSuccessful: string;
    touch?: {
      title: string;
      text: string;
    };
    servicePerformance?: {
      title: string;
      text: string;
    };
    payment?: {
      title: string;
      text: string;
    };
    feedback?: {
      title: string;
      text: string;
      rating: string;
      specific: string;
      send: string;
      success: string;
    };
    account?: {
      title: string;
      text: string;
      signUp: string;
    };
    home: string;
    register: string;
    registerSuccessful: string;
    close: string;
  };
  isLoggedIn: boolean;
  createBookingFeedback: (rating: number, feedback: string) => Promise<void>;
  FormRegister: ReactType;
  passwordToken: string;
}

const GiftCardConfirmationPage: FC<ConfirmationPageProps> = ({
  logoLink,
  translations,
  isLoggedIn,
  createBookingFeedback,
  FormRegister,
  passwordToken,
}) => {
  const [rating, setRating] = useState(0);
  const [feedback, setFeedback] = useState(null);
  const [isSubmitted, setIsSubmitted] = useState(false);
  const [registerModalIsOpen, setRegisterModalIsOpen] = useState(false);

  const openRegisterModal = (): void => {
    setRegisterModalIsOpen(true);
  };

  const closeRegisterModal = (): void => {
    setRegisterModalIsOpen(false);
  };

  useEffect(() => {
    window.scrollTo(0, 0);
  }, []);
  const createRatingButton = (value): JSX.Element => {
    value += 1;
    return (
      <li
        className={`${rating == value ? css.confirmation__active : ''}`}
        key={value}
      >
        <Button
          handleClick={(): void => setRating(value)}
          size={'small'}
          variant={'tertiary'}
        >
          {value}
        </Button>
      </li>
    );
  };

  return (
    <div className={css.confirmationPage}>
      <div className={css.confirmation__header}>
        <div className={css.confirmation__headerLogoWrapper}>
          <Link
            {...logoLink}
            className={css.confirmation__logoLink}
            aria-label="Back to home"
          >
            <LogoRawSVG className={css.confirmation__headerLogo} />
            <span>Technologie ganz einfach</span>
          </Link>
        </div>
      </div>

      <div className={css.confirmation__content}>
        <div
          className={`${css.confirmation__contentWrap} ${css.confirmation__steps}`}
        >
          <h1 className={css.confirmation__title}>{translations.trust}</h1>
          <span className={css.confirmation__subtitle}>
            {translations.subtitle}
          </span>
        </div>

        <div className={css.confirmation__contentWrap}>
          {isSubmitted ? (
            <h3>{translations.feedback.success}</h3>
          ) : (
            <>
              <h3>{translations.feedback.title}</h3>
              <span>{translations.feedback.text}</span>
              <span>{translations.feedback.rating}</span>

              <div className={css.confirmation__rating}>
                <ul>
                  {Array(10)
                    .fill(1)
                    .map((el, i) => createRatingButton(i))}
                </ul>
              </div>

              {rating > 0 && (
                <form action="" className={css.confirmation__ratingForm}>
                  <div>
                    <Textarea
                      style={'booking'}
                      label={translations.feedback.specific}
                      initialRows={2}
                      name="feedback"
                      onChange={(e): void => {
                        setFeedback(e.target.value);
                      }}
                      required={false}
                      placeholder={translations.feedback.specific}
                      optional={true}
                    />
                  </div>
                  <Button
                    handleClick={(): void => {
                      setIsSubmitted(true);
                      createBookingFeedback(rating, feedback);
                    }}
                    size={'small'}
                    variant={'primary'}
                  >
                    {translations.feedback.send}
                  </Button>
                </form>
              )}
            </>
          )}
        </div>

        {!isLoggedIn && (
          <>
            <div
              className={`${css.confirmation__contentWrap} ${css.confirmation__account}`}
            >
              <h3>{translations.account.title}</h3>
              <p>{translations.account.text}</p>
              <Button
                size={'small'}
                variant={'tertiary'}
                handleClick={openRegisterModal}
              >
                {translations.account.signUp}
              </Button>
            </div>
          </>
        )}
        <ReactModal
          isOpen={registerModalIsOpen}
          className={bookingCSS.booking__overlay}
          overlayClassName={bookingCSS.booking__modal}
          ariaHideApp={false}
          onRequestClose={closeRegisterModal}
        >
          <RegisterModal
            token={passwordToken}
            RegisterForm={FormRegister}
            title={translations.register}
            successText={translations.registerSuccessful}
            closeRegisterModal={closeRegisterModal}
            closeText={translations.close}
          />
        </ReactModal>

        {isLoggedIn && (
          <div
            className={`${css.confirmation__contentWrap} ${css.confirmation__account}`}
          >
            <Link title={translations.home} to={'/'}>
              <Button variant={'tertiary'}>{translations.home}</Button>
            </Link>
          </div>
        )}
      </div>
    </div>
  );
};

export default GiftCardConfirmationPage;