import React, {
  FC,
  ReactType,
  RefObject,
  useEffect,
  useRef,
  useState,
} from 'react';
import Layout from '../../components/Layout';
import { Button, Checkbox, LinkProps } from '../../index';
import ReactModal from 'react-modal';
import 'font-awesome/css/font-awesome.min.css';
import ArrowSVG from '../../assets/icons/icon_angle.svg';
import { checkIfAddressIsValid } from '../../helpers/addressHelper';
import { CoordsProps } from '../../components/AddressMap';
import { FormCustomerDetailsValues } from '../../components/FormCustomerDetails';
import { FormCustomerBillingDetailsValues } from '../../components/FormCustomerBillingDetails';
import { PaymentFormValues } from '../../components/FormPayment';
import classnames from 'classnames';
import {
  AddressModal,
  BookingHeader,
  LoginModal,
  PasswordResetModal,
  SummaryContent,
  SummaryGiftCard,
} from '../../helpers/bookingFunnelHelper';
import Modal from '../../blocks/Modal';
import css from '../BookingFunnel/index.module.css';
import * as R from 'ramda';
import { getAmountWithCurrency } from '../../helpers/priceHelper';
import FormGiftCard from '../../components/FormGiftCard';

export interface DraftServiceCall {
  price: number;
  currency: string;
}

export interface BookingFunnelGiftCardSubmitValues {
  serviceLocationData: FormCustomerDetailsValues;
  serviceBillingData: FormCustomerBillingDetailsValues;
  paymentData: PaymentFormValues;
  additionalData: {
    position: CoordsProps;
    receivesNewsletter: boolean;
  };
  physical: boolean;
  discountAmount: number;
}
export interface BookingFunnelGiftCardProps {
  BookingForm?: ReactType;
  PaymentForm?: ReactType;
  ServiceDetailsForm?: ReactType;
  BillingForm?: ReactType;
  translations: {
    steps?: {
      step1: string;
      step2: string;
      step3: string;
      step4: string;
    };
    serviceContactAndLocation: string;
    alreadyCustomer: string;
    loginHere: string;
    differingBillingAddress: string;
    invoiceAddress: string;
    payment: string;
    summary: string;
    dateTime: string;
    serviceLocation: string;
    voucher: string;
    total: string;
    summaryInfo: string;
    newsUpdates: string;
    accept: string;
    continueButton: string;
    bookFor: string;
    login: string;
    mapTitle: string;
    mapText: string;
    mapMarkerName: string;
    editAddressButton: string;
    useAddressButton: string;
    priceHappiness: string;
    bookError: string;
    close: string;
    resetPassword: string;
    selectAmount: string;
    byMail: string;
    byPdf: string;
    shipping: string;
  };
  LoginForm?: ReactType;
  PasswordResetForm?: ReactType;
  onSubmit: (data: BookingFunnelGiftCardSubmitValues) => void;
  terms: LinkProps;
  LinkProps?: LinkProps;
  locale: string;
  googleApiKey?: string;
  deviceType?: string;
  isAuthenticated?: boolean;
  currencyCode: string;
  isPdf: boolean;
  availableAmounts: Array<string>;
}

//add viual viewport to window so that typescript doesn't throw an errror
declare global {
  interface Window {
    visualViewport: EventTarget;
  }
}

const BookingFunnelGiftCardTemplate: FC<BookingFunnelGiftCardProps> = ({
  BookingForm,
  PaymentForm,
  BillingForm,
  translations,
  LoginForm,
  PasswordResetForm,
  onSubmit,
  terms,
  LinkProps,
  locale,
  googleApiKey,
  deviceType,
  isAuthenticated,
  currencyCode,
  isPdf = true,
  availableAmounts,
}) => {
  // Reverse order for scrolling
  const isUk = locale.slice(3, 5).toLowerCase() === 'gb';
  const steps = { step4: false, step3: false, step2: false, step1: true };
  const forms = {
    select: true,
    customerDetails: true,
    billingDetails: true,
    paymentDetails: true,
    terms: true,
  };
  const [getSteps, setSteps] = useState(steps);
  const [isDisabled, setDisabled] = useState(false);
  const [isLoading, setLoading] = useState(false);
  const [isBillingAddress, setBillingAddress] = useState(false);
  const [validForms, setValidForms] = useState(forms);
  const [position, setPosition] = useState<CoordsProps>(null);
  const [receivesNewsletter, setReceivesNewsletter] = useState(false);
  const [hideStickyFooter, setStickyFooter] = useState(false);
  const [isKeyboardOpenFallback, setKeyboardOpenFallback] = useState(false);
  const [submitError, setSubmitError] = useState(null);
  const isMobileOrTablet = deviceType === 'mobile' || deviceType === 'tablet';

  const [amount, setAmount] = useState(availableAmounts[0]);

  const [serviceBillingData, setServiceBillingData] = useState<
    FormCustomerBillingDetailsValues
  >(Object({}));
  const [serviceLocationData, setServiceLocationData] = useState<
    FormCustomerDetailsValues
  >(Object({}));
  const [paymentData, setPaymentData] = useState<PaymentFormValues>();

  const [initialValues, setInitialValues] = useState({
    serviceBillingData: null,
    serviceLocationData: null,
    paymentMethods: null,
    paymentData: {
      paymentMethod: 'Invoice',
    } as unknown,
  });

  const [stepTitle, setStepTitle] = useState(translations.steps.step1);

  const stepRefs: { [key: string]: RefObject<HTMLDivElement> } = {};
  stepRefs['refStep1'] = useRef(null);
  stepRefs['refStep2'] = useRef(null);
  stepRefs['refStep3'] = useRef(null);
  stepRefs['refStep4'] = useRef(null);

  useEffect(() => {
    for (const key of Object.keys(getSteps)) {
      if (getSteps[key] == true) {
        const item =
          stepRefs[`${'ref' + key.charAt(0).toUpperCase() + key.slice(1)}`]
            .current;
        // Substract header height in offfset
        window.scrollTo({
          top: item.offsetTop - 60,
          behavior: 'smooth',
        });
        break;
      }
    }
  }, [getSteps]);

  const isValid = (valid): void => {
    setDisabled(!valid);
  };

  useEffect(() => {
    isValid(Object.values(validForms).every(Boolean));
  }, [validForms]);

  const setLocationData = (values: FormCustomerDetailsValues): void => {
    setServiceLocationData(values);
    if (!isBillingAddress) setServiceBillingData(values);
  };

  const setBillingData = (values: FormCustomerBillingDetailsValues): void => {
    setServiceBillingData(values);
  };

  const setPaymentFormData = (values: PaymentFormValues): void => {
    setPaymentData(values);
  };

  const [addressModalProps, setAddressModalProps] = useState<{
    isOpen: boolean;
    address: FormCustomerDetailsValues | FormCustomerBillingDetailsValues;
    isValidAddressCallback: Function;
  }>({
    isOpen: false,
    address: null,
    isValidAddressCallback: Function(),
  });
  const isValidGoogleAddress = useRef(true);
  const isValidBillingAddress = useRef(true);

  const openAddressValidationModal = (address, validRef): void => {
    setAddressModalProps({
      isOpen: true,
      address: address,
      isValidAddressCallback: () => {
        validRef.current = true;
      },
    });
  };

  const closeAddressValidationModal = (): void => {
    setAddressModalProps({
      isOpen: false,
      address: null,
      isValidAddressCallback: Function(),
    });
  };

  const continueEvent = async (): Promise<void> => {
    const updatedSteps = Object.assign({}, getSteps);
    const updateForms = Object.assign({}, validForms);
    if (isDisabled) return;

    if (!updatedSteps.step2) {
      updatedSteps.step2 = true;
      setDisabled(true);
      setSteps(updatedSteps);
      setStepTitle(translations.steps.step2);
      updateForms.customerDetails = false;
      setValidForms(updateForms);
      return;
    }
    if (updatedSteps.step2 && !isValidGoogleAddress.current) {
      await checkIfAddressIsValid(
        continueEvent,
        serviceLocationData,
        isValidGoogleAddress,
        openAddressValidationModal,
        setPosition,
      );
      return;
    }
    if (
      updatedSteps.step2 &&
      !isValidBillingAddress.current &&
      isBillingAddress
    ) {
      await checkIfAddressIsValid(
        continueEvent,
        serviceBillingData,
        isValidBillingAddress,
        openAddressValidationModal,
        setPosition,
      );
      return;
    }
    if (
      updatedSteps.step2 &&
      !updatedSteps.step3 &&
      isValidGoogleAddress.current
    ) {
      updatedSteps.step3 = true;
      setSteps(updatedSteps);
      setStepTitle(translations.steps.step3);
      return;
    }

    if (updatedSteps.step3 && !updatedSteps.step4) {
      updatedSteps.step4 = true;
      updateForms.terms = false;
      setValidForms(updateForms);
      setSteps(updatedSteps);
      setStepTitle(translations.steps.step4);
      return;
    }
  };

  const [loginModalIsOpen, setLoginModalIsOpen] = useState(false);
  const [passwordResetModalIsOpen, setPasswordResetModalIsOpen] = useState(
    false,
  );

  const openLoginModal = (): void => {
    setLoginModalIsOpen(true);
  };

  const closeLoginModal = (): void => {
    setLoginModalIsOpen(false);
  };

  const openPasswordResetModal = (): void => {
    setPasswordResetModalIsOpen(true);
  };

  const closePasswordResetModal = (): void => {
    setPasswordResetModalIsOpen(false);
  };

  const submitServiceCall = async (): Promise<void> => {
    if (!isValidGoogleAddress.current) {
      await checkIfAddressIsValid(
        submitServiceCall,
        serviceLocationData,
        isValidGoogleAddress,
        openAddressValidationModal,
        setPosition,
      );
      return;
    }
    if (!isValidBillingAddress.current && isBillingAddress) {
      await checkIfAddressIsValid(
        submitServiceCall,
        serviceBillingData,
        isValidBillingAddress,
        openAddressValidationModal,
        setPosition,
      );
      return;
    }
    setSubmitError(null);
    setDisabled(true);
    setLoading(true);
    try {
      await onSubmit({
        serviceLocationData,
        serviceBillingData,
        paymentData,
        discountAmount: parseInt(amount),
        physical: !isPdf,
        additionalData: {
          position,
          receivesNewsletter,
        },
      });
    } catch (e) {
      console.error(e);
      setSubmitError(e.message);
      setLoading(false);
      setDisabled(false);
    }
  };

  // Check if virtual keyboard is open
  const [resizeHeight, setResizeHeight] = useState(null);
  const keyboardResizeEvent = (event): void => {
    const ua = navigator.userAgent.toLowerCase();
    const isAndroid = ua.indexOf('android') > -1;
    if (isAndroid) {
      if (window.screen.height - event.target.height > 250) {
        setStickyFooter(true);
      } else {
        setStickyFooter(false);
      }
    } else {
      setResizeHeight(event.target.height);
    }
  };

  useEffect(() => {
    if (resizeHeight != null && resizeHeight !== window.innerHeight) {
      setStickyFooter(true);
    } else {
      setStickyFooter(false);
    }
  }, [resizeHeight]);

  useEffect(() => {
    if (window.visualViewport && isMobileOrTablet) {
      window.visualViewport.addEventListener('resize', keyboardResizeEvent);
      return (): void =>
        window.visualViewport.removeEventListener(
          'resize',
          keyboardResizeEvent,
        );
    } else {
      setKeyboardOpenFallback(true);
    }
  }, []);

  return (
    <Layout>
      <BookingHeader LinkProps={LinkProps} steps={getSteps} title={stepTitle} />

      <div className={css.bookingPage}>
        <div className={css.booking__content}>
          {getSteps.step1 && (
            <div
              className={css.booking__contentWrap}
              ref={stepRefs['refStep1']}
            >
              <span className={css.booking__contentTitle}>
                {translations.steps.step1}
              </span>
              <FormGiftCard
                translations={translations}
                availableAmounts={availableAmounts}
                value={amount}
                currencyCode={currencyCode}
                onSelect={(amount): void => {
                  setAmount(amount);
                }}
                isPrint={isPdf}
              />
            </div>
          )}

          {getSteps.step2 && (
            <div
              className={css.booking__contentWrap}
              ref={stepRefs['refStep2']}
              style={
                !isBillingAddress && getSteps.step2 && !getSteps.step3
                  ? { marginBottom: '100px' }
                  : {}
              }
            >
              <span className={css.booking__contentTitle}>
                {translations.serviceContactAndLocation}
              </span>
              {!isAuthenticated && (
                <div className={css.booking__legal}>
                  {translations.alreadyCustomer}
                  <a className={css.booking__login} onClick={openLoginModal}>
                    {translations.loginHere}
                  </a>
                </div>
              )}
              <ReactModal
                isOpen={loginModalIsOpen}
                className={css.booking__overlay}
                overlayClassName={css.booking__modal}
                ariaHideApp={false}
                onRequestClose={closeLoginModal}
              >
                <LoginModal
                  LoginForm={LoginForm}
                  title={translations.login}
                  closeLoginModal={closeLoginModal}
                  handlePasswordForgot={(): void => {
                    closeLoginModal();
                    openPasswordResetModal();
                  }}
                />
              </ReactModal>
              <ReactModal
                isOpen={passwordResetModalIsOpen}
                className={css.booking__overlay}
                overlayClassName={css.booking__modal}
                ariaHideApp={false}
                onRequestClose={closePasswordResetModal}
              >
                <PasswordResetModal
                  PasswordResetForm={PasswordResetForm}
                  title={translations.resetPassword}
                  handleAlreadyRegistered={(): void => {
                    closePasswordResetModal();
                    openLoginModal();
                  }}
                  closePasswordResetModal={closePasswordResetModal}
                />
              </ReactModal>
              <div>
                {BookingForm && (
                  <BookingForm
                    disableToolTips={true}
                    showAccountInfo={false}
                    showButton={false}
                    checkIfValid={(bool): void => {
                      isValidGoogleAddress.current = false;
                      const updatedForms = Object.assign({}, validForms);
                      updatedForms.customerDetails = bool;
                      setValidForms(updatedForms);
                    }}
                    getFormData={setLocationData}
                    initialValues={initialValues.serviceLocationData}
                    checkIfKeyBoardOpen={(bool): void => {
                      if (isMobileOrTablet && isKeyboardOpenFallback)
                        setStickyFooter(bool);
                    }}
                  />
                )}
              </div>
              <Checkbox
                onChange={(e): void => {
                  setBillingAddress(e.target.checked);
                  const updatedForms = Object.assign({}, validForms);
                  updatedForms.billingDetails = !e.target.checked;
                  setValidForms(updatedForms);
                  if (!e.target.checked)
                    setBillingData(Object.assign({}, serviceLocationData));
                }}
                value={isBillingAddress}
                name="isBillingAddress"
                label={translations.differingBillingAddress}
              />
            </div>
          )}

          {isBillingAddress && (
            <div
              className={css.booking__contentWrap}
              style={
                isBillingAddress && !getSteps.step3
                  ? { marginBottom: '100px' }
                  : {}
              }
            >
              <span className={css.booking__contentTitle}>
                {translations.invoiceAddress}
              </span>
              <div>
                {BillingForm && (
                  <BillingForm
                    showAccountInfo={false}
                    showButton={false}
                    checkIfValid={(bool): void => {
                      isValidBillingAddress.current = false;
                      const updatedForms = Object.assign({}, validForms);
                      updatedForms.billingDetails = bool;
                      setValidForms(updatedForms);
                    }}
                    getFormData={setBillingData}
                    initialValues={initialValues.serviceBillingData}
                    checkIfKeyBoardOpen={(bool): void => {
                      if (isMobileOrTablet && isKeyboardOpenFallback)
                        setStickyFooter(bool);
                    }}
                  />
                )}
              </div>
            </div>
          )}

          <ReactModal
            isOpen={addressModalProps.isOpen}
            className={css.booking__mapoverlay}
            overlayClassName={css.booking__mapmodal}
            ariaHideApp={false}
            onRequestClose={closeAddressValidationModal}
          >
            <AddressModal
              closeAddressValidationModal={closeAddressValidationModal}
              translations={translations}
              addressModalProps={addressModalProps}
              position={position}
              continueEvent={continueEvent}
              googleApiKey={googleApiKey}
            />
          </ReactModal>

          {getSteps.step3 && (
            <div
              className={`${css.booking__contentWrap} ${css.booking__paymentWrap}`}
              ref={stepRefs['refStep3']}
            >
              <span className={css.booking__contentTitle}>
                {translations.payment}
              </span>
              <div>
                {PaymentForm && (
                  <PaymentForm
                    isGiftCard={true}
                    disableCreditCard={true}
                    checkIfValid={(bool): void => {
                      const updatedForms = Object.assign({}, validForms);
                      updatedForms.paymentDetails = bool;
                      updatedForms.terms = true;
                      setValidForms(updatedForms);

                      const updatedSteps = Object.assign({}, getSteps);
                      if (updatedSteps.step4) {
                        updatedSteps.step4 = false;
                        setSteps(updatedSteps);
                        setStepTitle(translations.steps.step3);
                      }
                    }}
                    getFormData={setPaymentFormData}
                    invoiceAddress={serviceBillingData}
                    paymentMethods={initialValues.paymentMethods}
                    checkIfKeyBoardOpen={(bool): void => {
                      if (isMobileOrTablet && isKeyboardOpenFallback)
                        setStickyFooter(bool);
                    }}
                    inputErrors={{}}
                  />
                )}
              </div>
            </div>
          )}

          {getSteps.step4 && (
            <>
              <div
                className={css.booking__contentWrap}
                ref={stepRefs['refStep4']}
              >
                <SummaryGiftCard
                  translations={translations}
                  serviceBillingData={serviceBillingData}
                  amount={parseInt(amount)}
                  isPdf={isPdf}
                  currencyCode={currencyCode}
                />
              </div>

              <div className={css.booking__contentWrap}>
                <div className={css.booking__terms}>
                  <Checkbox
                    label={translations.newsUpdates}
                    onChange={(e): void => {
                      setReceivesNewsletter(e.target.checked);
                    }}
                  />
                  <Checkbox
                    label={translations.accept}
                    onChange={(e): void => {
                      const updateForms = Object.assign({}, validForms);
                      updateForms.terms = e.target.checked;
                      setValidForms(updateForms);
                    }}
                    link={terms}
                  />
                </div>
              </div>
            </>
          )}
        </div>
        {!hideStickyFooter && (
          <div className={css.booking__footer}>
            <div className={css.booking__footerWrap}>
              {!getSteps.step4 ? (
                <>
                  <div className={css.booking__package}>
                    <span className={css.booking__packageName}>
                      {isPdf ? translations.byPdf : translations.byMail}
                    </span>
                    <div className={css.booking__price}>
                      {
                        <span>
                          {getAmountWithCurrency(
                            isPdf ? amount : parseInt(amount) + 3,
                            currencyCode,
                          )}
                        </span>
                      }
                    </div>
                  </div>
                  <Button
                    handleClick={(): Promise<void> => continueEvent()}
                    disabled={isDisabled}
                    size={'small'}
                    variant={'primary'}
                    showThrobber={isLoading}
                    data-testid="ButtonContinue"
                  >
                    {translations.continueButton}
                    <ArrowSVG className={css.booking__continueIcon} />
                  </Button>
                </>
              ) : (
                <div className={css.booking__bookButton}>
                  <Modal
                    title={translations.bookError}
                    isOpen={!!submitError}
                    handleOnSubmit={(): void => {
                      setSubmitError(null);
                    }}
                    actions={
                      <Button type="submit">{translations.close}</Button>
                    }
                  >
                    {submitError}
                  </Modal>
                  <Button
                    handleClick={(): Promise<void> => submitServiceCall()}
                    disabled={isDisabled}
                    size={'small'}
                    variant={'primary'}
                    data-testid="ButtonFinish"
                  >
                    {!isLoading ? (
                      <>
                        {translations.bookFor}
                        &nbsp;
                        {getAmountWithCurrency(
                          isPdf ? amount : parseInt(amount) + 3,
                          currencyCode,
                        )}
                      </>
                    ) : (
                      <>
                        <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>
          </div>
        )}
      </div>
    </Layout>
  );
};

export default BookingFunnelGiftCardTemplate;