import React, { FC, useEffect, useState, ReactType, useRef } from 'react';
import Layout from '../../components/Layout';
import css from './index.module.css';
import { LinkProps } from '../../index';
import IconDownArrowSVG from '../../assets/icons/icon-down-arrow.svg';
import { RatingHeader, RatingFooter } from '../../helpers/ratingHelper';
export interface RatingPageProps {
  CustomerFeedbackForm?: ReactType;
  PartnerFeedbackForm?: ReactType;
  LinkProps?: LinkProps;
  translations?: {
    headerTitle?: string;
    headerSubtitle?: string;
    milaflowTitle?: string;
    milaflowSubTitlePart1?: string;
    milaflowSubTitlePart2?: string;
    milaflowSubtitle?: string;
    milaflowText1?: string;
    milaflowText2?: string;
    milaflowText3?: string;
    dearText?: string;
    partnerHeaderSubtitle?: string;
    sendFeedbackMessage?: string;
  };
  isPartner?: boolean;
  partnerName?: string;
  milaFlowImages?: {
    milaflowImageStep1?: string;
    milaflowImageStep2?: string;
    milaflowImageStep3?: string;
  };
  EnterprisePartnerName?: string;
  isSubmitted?: boolean;
}

const RatingPageTemplate: FC<RatingPageProps> = ({
  LinkProps,
  translations,
  isPartner,
  partnerName,
  milaFlowImages,
  EnterprisePartnerName,
  children,
  isSubmitted,
}) => {
  const milaflowTitle = useRef(null);

  const [getMilaFlowTitle, setMilaFlowTitle] = useState(false);

  useEffect(() => {
    if (isSubmitted == true) {
      window.scrollTo({
        top: 0,
        behavior: 'smooth',
      });
    }
  }, [isSubmitted]);

  useEffect(() => {
    if (getMilaFlowTitle == true) {
      const item = milaflowTitle.current;
      // Substract header height in offfset
      window.scrollTo({
        top: item.offsetTop,
        behavior: 'smooth',
      });
      setTimeout(() => {
        setMilaFlowTitle(false);
      }, 200);
    }
  }, [getMilaFlowTitle]);

  return (
    <>
      <div className={css.rating__pageLayout}>
        <Layout>
          <div className={css.rating__pageHeader}>
            <RatingHeader LinkProps={LinkProps} />
            <div className={css.rating__headerContent}>
              <div className={css.rating__headerWapper}>
                <h1 className={css.rating__title}>
                  {!isPartner && translations.headerTitle}
                  {isPartner && (
                    <>
                      {translations.headerTitle},<br />
                      {partnerName}
                    </>
                  )}
                </h1>
                <div className={css.rating__subTitle}>
                  {!isPartner && translations.headerSubtitle}
                  {isPartner && translations.partnerHeaderSubtitle}
                </div>
                {!isPartner && (
                  <div
                    className={css.rating__text}
                    onClick={(): void => {
                      setMilaFlowTitle(true);
                    }}
                  >
                    {translations.milaflowTitle}{' '}
                    <IconDownArrowSVG className={css.rating__downArrow} />{' '}
                  </div>
                )}
              </div>
            </div>
          </div>

          {children}

          {!isPartner && (
            <div className={css.rating__footer} ref={milaflowTitle}>
              <RatingFooter
                translations={translations}
                milaFlowImages={milaFlowImages}
                EnterprisePartnerName={EnterprisePartnerName}
              />
            </div>
          )}
        </Layout>
      </div>
    </>
  );
};

export default RatingPageTemplate;