import { StepConfig, patternValidator } from "@deuna/checkout-core";
import { TermsAndConditionsPattern } from "@deuna/utilities-patterns";
import ContinueButton from "components/ContinueButton";
import Logout from "components/Logout";
import { Disclaimer } from "components/Disclaimer";
import { Header } from "components/Header";
import { BodySmall } from "@deuna/components/typography";
import paymentMethodsItems from "@deuna/paymentmethods-pattern/patterns/payment-methods/src/paymentmethods-items";

import { StepName } from "./steps";

interface StepConfigProps {
  handleClose?: () => void;
  onExit?: () => void;
}

const guestSteps = ({ handleClose, onExit }: StepConfigProps): StepConfig => ({
  id: "guest",
  views: [],
  mainLayout: [
    {
      name: StepName.CardFormStep,
      label: "",
      hiddenStep: true,
      hideMerchantLogo: true,
      sectionOverride: {
        $style: {
          padding: "0px",
        },
      },
      header: [
        {
          pattern: () => <Header handleClose={handleClose} />,
        },
      ],
      sections: [
        {
          pattern: () => (
            <BodySmall>
              Ingresa los datos de tu tarjeta de crédito/débito.
            </BodySmall>
          ),
        },
        {
          pattern: () => paymentMethodsItems.CreditCard().content as any,
        },
      ],
      footer: [
        {
          pattern: ContinueButton,
        },
        {
          pattern: TermsAndConditionsPattern,
          props: {
            legalMessage: "Acepto todas las ",
          },
        },
      ],
      onValidate: ({ userContext }) => {
        const isEmailEmpty = userContext.state.userInfo.email === "";

        if (isEmailEmpty) {
          patternValidator.toggleValidation("EmailPattern");
          return false;
        }

        const isValid = patternValidator.getValidator("EmailPattern").isValid;

        if (!isValid) {
          patternValidator.toggleValidation("EmailPattern");
          return false;
        }
        return isValid;
      },
    },
    {
      name: StepName.AddressStep,
      label: "",
      hiddenStep: true,
      hideMerchantLogo: true,
      sectionOverride: {
        $style: {
          padding: "0px",
        },
      },
      header: [{ pattern: () => <Header handleClose={handleClose} /> }],
      sections: [
        {
          pattern: Disclaimer,
        },
      ],
      footer: [
        {
          pattern: Logout,
          props: {
            onExit: onExit,
            legalMessage: "Acepto todas las ",
          },
        },
      ],
      onValidate: () => {
        return true;
      },
    },
  ],
});

export default guestSteps;