import React from 'react';
import { Controller, useForm } from 'react-hook-form';
import { Box } from '@nova-hf/ui';
import { Button, InputMessage, InputWrapper, TextInput } from 'frisco';
import { inject, observer } from 'mobx-react';

type CardFormProps = {
  isInverted: boolean;
  onButtonClick?: () => void;
  onSubmit: (form: PaymentMethodForm) => void;
  buttonText: string;
  enabledCondition?: boolean;
};

type PaymentMethodForm = {
  expiry: string;
  cvc: string;
  cardNumber: string;
};

const CardForm = ({
  onButtonClick,
  isInverted,
  onSubmit,
  buttonText,
  enabledCondition = true,
}: CardFormProps) => {
  const textColor = isInverted ? 'white' : 'black100';
  const color = isInverted ? 'black100' : 'white';
  const {
    handleSubmit,
    control,
    watch,
    formState: { errors, isValid },
  } = useForm<PaymentMethodForm>({
    mode: 'onBlur',
    reValidateMode: 'onBlur',
    defaultValues: {
      cardNumber: '',
      expiry: '',
      cvc: '',
    },
  });
  const { cardNumber, expiry, cvc } = watch();

  const validateExpiry = (value: string) => {
    if (!/^(0[1-9]|1[0-2])\d{2}$/.test(value)) {
      return 'Gildistími er ekki gildur (MMYY)';
    }

    const month = parseInt(value.substring(0, 2), 10);
    const year = parseInt(value.substring(2, 4), 10);

    const currentYear = new Date().getFullYear() % 100;
    const currentMonth = new Date().getMonth() + 1;

    if (year < currentYear || (year === currentYear && month < currentMonth)) {
      return 'Kort útrunnið';
    }

    return true;
  };

  const disabled = !isValid || (!enabledCondition && isValid);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="cardNumber"
        control={control}
        shouldUnregister={true}
        rules={{
          required: 'Vinsamlegast sláðu inn kortanúmer',
          pattern: {
            value: /^\d{13,19}$/,
            message: 'Kortanúmer er ekki gilt',
          },
        }}
        render={({ field }) => (
          <InputWrapper
            input={
              <TextInput
                {...field}
                id="cardNumber"
                name="Kortanúmer"
                disabled={false}
                placeholder=""
                value={cardNumber}
                autoComplete="cc-number"
                required
                backgroundColor={color}
                textColor={textColor}
                isLabeled={true}
                onBlur={field.onBlur}
              />
            }
            slideComponent={<InputMessage status="Error" text={errors.cardNumber?.message ?? ''} />}
            slideActive={!!errors.cardNumber}
          />
        )}
      />
      <Box display="flex" flexDirection="row" alignItems="flex-start" marginY={3} gap={1}>
        <Controller
          name="expiry"
          shouldUnregister={true}
          control={control}
          rules={{ required: 'Gildistími er nauðsynlegur', validate: validateExpiry }}
          render={({ field }) => (
            <InputWrapper
              input={
                <TextInput
                  {...field}
                  id="cardExpiry"
                  name="Gildistími"
                  disabled={false}
                  placeholder=""
                  value={expiry}
                  autoComplete="cc-exp"
                  required
                  backgroundColor={color}
                  textColor={textColor}
                  isLabeled={true}
                  onBlur={field.onBlur}
                />
              }
              slideComponent={<InputMessage status="Error" text={errors.expiry?.message ?? ''} />}
              slideActive={!!errors.expiry}
            />
          )}
        />
        <Controller
          name="cvc"
          control={control}
          shouldUnregister={true}
          rules={{
            required: 'CVC er nauðsynlegt',
            pattern: {
              value: /^\d{3,4}$/,
              message: 'CVC verður að vera 3 eða 4 tölustafir',
            },
          }}
          render={({ field }) => (
            <InputWrapper
              input={
                <TextInput
                  {...field}
                  id="cardCvc"
                  name="CVC"
                  disabled={false}
                  placeholder=""
                  value={cvc}
                  autoComplete="cvc"
                  required
                  backgroundColor={color}
                  textColor={textColor}
                  isLabeled={true}
                  onBlur={field.onBlur}
                />
              }
              slideComponent={<InputMessage status="Error" text={errors.cvc?.message ?? ''} />}
              slideActive={!!errors.cvc}
            />
          )}
        />
      </Box>
      <Button
        isDark={isInverted}
        textColor={disabled ? 'grey500' : 'white'}
        textVariant="pMediumRegular"
        disabled={disabled}
        text={buttonText}
        backgroundColor={disabled ? color : 'pink'}
        onClick={onButtonClick}
      ></Button>
    </form>
  );
};

export default inject('cart')(observer(CardForm));