'use client';

import { useState } from 'react';
import { useForm, SubmitHandler } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';
import { FooterSubscriptionFormType } from '@theme/types';
import { useEmailSubscriptionMutation } from '@akinon/next/data/client/misc';
import { useGetWidgetQuery } from '@akinon/next/data/client/misc';
import { Input, Button, Checkbox, Modal } from '@theme/components';
import { useLocalization } from '@akinon/next/hooks';
import { Icon } from '@akinon/next/components';

const subscriptionFormSchema = (t: (key: string) => string) =>
  yup.object().shape({
    email: yup
      .string()
      .email(t('common.newsletter_signup.required_email'))
      .required(t('common.newsletter_signup.required')),
    subscribe_contract: yup
      .boolean()
      .oneOf([true], t('common.newsletter_signup.required'))
  });

export default function FooterSubscriptionForm() {
  const { t } = useLocalization();
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [emailSubscription] = useEmailSubscriptionMutation();
  const { data: privacyPolicy } = useGetWidgetQuery('privacy-policy');

  const {
    register,
    handleSubmit,
    formState: { errors }
  } = useForm<FooterSubscriptionFormType>({
    resolver: yupResolver(subscriptionFormSchema(t))
  });

  const onSubmit: SubmitHandler<FooterSubscriptionFormType> = (data) => {
    emailSubscription(data)
      .unwrap()
      .then(() => setIsModalOpen(true));
  };

  return (
    <div>
      <div className="flex items-center justify-between border border-[#7d7d7d] px-4 py-[14px] gap-4 w-[331px]">
        <div className="flex-1">
          <Input
            id="footer-subscription-email"
            type="email"
            placeholder={t('common.newsletter_signup.email_address')}
            className="border-0 h-auto p-0 flex-1"
            {...register('email')}
            error={errors.email}
            data-testid="newsletter-input"
          />
        </div>

        <Button
          type="submit"
          appearance="outlined"
          className="bg-transparent hover:bg-transparent p-0 h-auto"
          data-testid="newsletter-submit"
          onClick={handleSubmit(onSubmit)}
        >
          <Icon name="arrow-right" size={16} className="text-black" />
        </Button>
      </div>

      {/* <Checkbox
        {...register('subscribe_contract')}
        error={errors.subscribe_contract}
        data-testid="newsletter-agreement-checkbox"
      >
        {t('common.newsletter_signup.accept')}{' '}
        <button
          type="button"
          className="underline"
          onClick={() => {
            setIsModalOpen(true);
          }}
          data-testid="newsletter-agreement"
        >
          {t('common.newsletter_signup.privacy_policy')}
        </button>
        <Modal
          className="h-4/5 w-4/5 p-4 flex flex-col justify-between items-center md:p-12 lg:h-1/2 lg:w-1/2"
          portalId="footer-subscription-privacy-policy-modal"
          open={isModalOpen}
          setOpen={setIsModalOpen}
          showCloseButton={false}
        >
          <div
            className="mb-3 overflow-hidden overflow-y-auto"
            dangerouslySetInnerHTML={{
              __html: privacyPolicy?.attributes?.privacy_policy?.value
            }}
          />

          <Button
            onClick={() => setIsModalOpen(false)}
            appearance="outlined"
            className="font-medium px-10 py-2"
            data-testid="newsletter-modal-close-button"
          >
            {t('common.newsletter_signup.close')}
          </Button>
        </Modal>
      </Checkbox> */}
    </div>
  );
}