/* eslint-disable react/no-danger */

import FormItem from "@/components/form/form-item";
import { Tooltip } from "@/components/ui/tooltip/tooltip";
import PolicyCheck from "@/components/widget/policy-check/policy-check";
import { useLocale } from "@/hooks/useLocale";

interface PaymentAgreementFormItemProps {
  saleAgreementText: string;
  preSaleAgreementText: string;
}

const PaymentAgreementFormItem = (props: PaymentAgreementFormItemProps) => {
  const { t } = useLocale();
  return (
    <FormItem
      name="kvkk"
      rules={{
        required: {
          value: true,
          message: "İşlemi tamamlamak için önce onay vermelisiniz.",
        },
      }}
    >
      {({ field, fieldState, setValue }) => (
        <div>
          <PolicyCheck
            value={field.value}
            onChange={setValue}
            renderModalTitle={t("Contracts and Forms")}
            renderModalItem={() => (
              <PolicyCheck.PaymentAgreementModalContent
                saleAgreementText={props.saleAgreementText}
                preSaleAgreementText={props.preSaleAgreementText}
              />
            )}
            renderLabelItem={({ toggleModal }) => (
              <PolicyCheck.PaymentAgreementLabel onClick={toggleModal} />
            )}
            showButton
          />
          {fieldState.error && (
            <Tooltip
              position="bottom"
              label={fieldState.error.message}
              isAlwaysVisible
            >
              <div className="w-[300px]" />
            </Tooltip>
          )}
        </div>
      )}
    </FormItem>
  );
};

export default PaymentAgreementFormItem;