/* eslint-disable react/no-danger */
/* eslint-disable react/jsx-no-bind */
import Image from "next/image";
import type { RefObject } from "react";
import { useState } from "react";
import type { UseFormReturn } from "react-hook-form";

import FormMaskInput from "@/components/form/components/basic/form-mask-input";
import FormTextInput from "@/components/form/components/basic/form-text-input";
import FormCreditCardInput from "@/components/form/components/related/form-credit-card-input";
import FormPhoneInput from "@/components/form/components/related/form-phone-input";
import type { FormHandles } from "@/components/form/form";
import Form from "@/components/form/form";
import FormItem from "@/components/form/form-item";
import { Button } from "@/components/ui/button/button";
import { Tooltip } from "@/components/ui/tooltip/tooltip";
import { useLocale } from "@/hooks/useLocale";
import { requiredRule } from "@/validations/form-rules/rules/required-rule";

import PolicyCheck from "../../policy-check/policy-check";
import { CreditCardInfos } from "../credit-card-infos/credit-card-infos";

interface FormType {
  rtaPan: string;
  cardHolderName: string;
  expiryDate: string;
  cvc: string;
  accountAliasName: string;
  msisdn: {
    phoneNumber: string;
    dialCode: string;
  };
}

export interface MasterpassRegisterFormProps {
  onSubmit: (variables: FormType) => void;
  masterpassFormRef: RefObject<FormHandles>;
  methods: UseFormReturn<FormType, any, undefined>;
}

const MasterpassRegisterForm = (props: MasterpassRegisterFormProps) => {
  const [isCvcFocused, setIsCvcFocused] = useState(false);
  const { t } = useLocale();
  async function handleSubmit(params: FormType) {
    props.onSubmit(params);
  }

  return (
    <Form
      ref={props.masterpassFormRef}
      methods={props.methods}
      mode="onChange"
      onSubmit={handleSubmit}
    >
      <div className="flex flex-col">
        <div className="flex flex-col lg:flex-row lg:gap-6 ">
          <div className="w-[344px]">
            <div className="flex flex-col gap-4 ">
              <span className="text-base text-black">
                {t("Card Information")}
              </span>
              <div className="flex flex-col gap-4">
                <FormCreditCardInput
                  placeholder={`${t("Card number")}*`}
                  rules={{
                    required: {
                      value: true,
                      message: t("This field is required"),
                    },
                  }}
                  name="rtaPan"
                />
                <FormTextInput
                  name="cardHolderName"
                  fullWidth
                  rules={{
                    required: {
                      value: true,
                      message: t("This field is required"),
                    },
                  }}
                  placeholder={`${t("Name and Surname on the Card")}*`}
                />
                <div className="grid grid-cols-2 gap-3">
                  <FormMaskInput
                    mask="creditCardExpire"
                    name="expiryDate"
                    placeholder={`${t("Expiration date")}*`}
                    fullWidth
                    rules={{
                      required: {
                        value: true,
                        message: t("This field is required"),
                      },
                    }}
                  />
                  <FormMaskInput
                    mask="creditCardCvc"
                    name="cvc"
                    placeholder="CVV"
                    fullWidth
                    rules={{
                      required: {
                        value: true,
                        message: t("This field is required"),
                      },
                    }}
                    onClick={() => setIsCvcFocused(true)}
                    onBlur={() => setIsCvcFocused(false)}
                  />
                </div>
                <FormTextInput
                  name="accountAliasName"
                  rules={{
                    required: {
                      value: true,
                      message: t("This field is required"),
                    },
                  }}
                  fullWidth
                  placeholder={`${t("Give the Card a Name*")}`}
                />
                <FormPhoneInput
                  fullWidth
                  rules={{
                    validate: (value) => {
                      if (!value || value?.phoneNumber === "")
                        return t("This field is required");
                      const phoneNumberRegex = /^[0-9]{10}$/;
                      if (!phoneNumberRegex.test(value.phoneNumber)) {
                        return t("Phone number is wrong");
                      }
                      return true;
                    },
                  }}
                  name="msisdn"
                  size="lg"
                  label={`${t("Telephone")}*`}
                />
                <FormItem
                  name="masterpassAgreement"
                  rules={{ required: requiredRule }}
                >
                  {({ field, fieldState, setValue }) => (
                    <div>
                      <PolicyCheck
                        value={field.value}
                        onChange={setValue}
                        renderModalTitle={t("Masterpass Terms of Use")}
                        renderModalItem={() => (
                          <div>
                            <p>{t("Masterpass Terms of Use Content")}</p>
                          </div>
                        )}
                        renderLabelItem={({ toggleModal }) => (
                          <PolicyCheck.MasterpassLabel onClick={toggleModal} />
                        )}
                      />
                      {fieldState.error && (
                        <Tooltip
                          position="bottom"
                          label={fieldState.error.message}
                          isAlwaysVisible
                        >
                          <div className="w-[300px]" />
                        </Tooltip>
                      )}
                    </div>
                  )}
                </FormItem>
              </div>
            </div>
          </div>
          <div className="mt-10 w-[344px]">
            <CreditCardInfos
              cardNumber={
                props.methods?.watch("rtaPan")?.length > 0
                  ? props.methods?.watch("rtaPan")
                  : "0000 0000 0000 0000"
              }
              cardExpireDate={
                props.methods?.watch("expiryDate")?.length > 0
                  ? props.methods
                      .watch("expiryDate")
                      .replace(/(\d{2})(\d{2})/, "$1/$2")
                  : t("MM/YY")
              }
              cardHolderName={
                props.methods?.watch("cardHolderName") ?? t("Card Owner")
              }
              cardCvv={
                props.methods?.watch("cvc")?.length > 0
                  ? props.methods?.watch("cvc")
                  : "000"
              }
              showBack={isCvcFocused}
            />
          </div>
        </div>
        <div className="mt-6 flex items-center justify-between">
          <figure className="h-full">
            <Image
              src="/assets/images/masterpass-logo.png"
              alt="chip"
              width={154}
              height={10}
            />
          </figure>

          <Button
            className="min-w-[220px]"
            onClick={(e) => {
              props.masterpassFormRef?.current?.submit();
              e.preventDefault();
            }}
            size="xl"
            variant="primary"
          >
            {t("Save Card")}
          </Button>
        </div>
      </div>
    </Form>
  );
};

export { MasterpassRegisterForm };