import React from 'react';
import { Input, Select, Icon, Image } from '@akinon/next/components';
import {
  Control,
  FieldError,
  FieldErrors,
  UseFormRegister
} from 'react-hook-form';

export interface CardFormSectionProps {
  register: UseFormRegister<any>;
  control: Control<any>;
  errors: FieldErrors;
  months: Array<{ label: string; value: string }>;
  years: Array<{ label: string; value: string }>;
  translations?: {
    cardHolder?: string;
    cardNumber?: string;
    expiryDate?: string;
    cvv?: string;
    cvvTooltip?: string;
    saveCardForFuture?: string;
  };
}

export const CardFormSection = ({
  register,
  control,
  errors,
  months,
  years,
  translations = {}
}: CardFormSectionProps) => {
  return (
    <div className="w-full bg-white">
      <div className="px-4 my-2 w-full flex justify-between flex-wrap">
        <div className="my-2 w-full sm:px-4">
          <Input
            label={translations.cardHolder}
            {...register('card_holder')}
            error={errors.card_holder as FieldError}
          />
        </div>

        <div className="my-2 w-full flex flex-col sm:px-4">
          <div className="text-xs text-gray-800 mb-2 w-full flex justify-between items-center">
            <span>{translations.cardNumber}</span>
          </div>

          <Input
            format="#### #### #### ####"
            mask="_"
            allowEmptyFormatting={true}
            control={control}
            {...register('card_number')}
            error={errors.card_number as FieldError}
          />
        </div>

        <div className="w-full my-2 sm:flex">
          <div className="sm:w-2/3 sm:px-4">
            <label
              className="flex w-full text-xs text-start text-black-400 mb-1.5"
              htmlFor="card_month"
            >
              {translations.expiryDate}
            </label>

            <div className="flex w-full h-10 space-x-2.5">
              <div className="w-2/4">
                <Select
                  className="w-full text-xs border-gray-400 sm:text-sm"
                  options={months}
                  {...register('card_month')}
                  error={errors.card_month as FieldError}
                />
              </div>

              <div className="w-2/4">
                <Select
                  className="w-full text-xs border-gray-400 sm:text-sm"
                  options={years}
                  {...register('card_year')}
                  error={errors.card_year as FieldError}
                />
              </div>
            </div>
          </div>

          <div className="my-2 sm:w-1/3 sm:px-4 sm:my-0">
            <label
              className="flex w-full text-xs text-start text-black-400 mb-1.5"
              htmlFor="card_cvv"
            >
              {translations.cvv}
            </label>
            <Input
              format="###"
              mask="_"
              control={control}
              allowEmptyFormatting={true}
              {...register('card_cvv')}
              error={errors.card_cvv as FieldError}
            />
            <div className="group relative flex items-center justify-start text-gray-600 cursor-pointer mt-2 transition-all hover:text-secondary">
              <span className="text-xs underline">{translations.cvv}</span>
              <Icon name="cvc" size={16} className="leading-none ml-2" />
              <div className="hidden group-hover:block absolute right-0 bottom-5 w-[11rem] lg:w-[21rem] lg:left-auto lg:right-auto border-2">
                <Image src="/cvv.jpg" alt="Cvv" width={385} height={264} />
              </div>
            </div>
          </div>
        </div>

        <div className="my-2 w-full flex flex-col sm:px-4">
          <label className="flex items-center space-x-2">
            <input
              type="checkbox"
              {...register('register_consumer_card')}
              className="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded"
            />
            <span className="text-sm text-gray-700">
              {translations.saveCardForFuture}
            </span>
          </label>
        </div>
      </div>
    </div>
  );
};