/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable react/no-danger */
import { useBoolean } from "usehooks-ts";

import { Button } from "@/components/ui/button/button";
import { Checkbox } from "@/components/ui/checkbox/checkbox";
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { useLocale } from "@/hooks/useLocale";

interface PolicyCheckProps {
  value: boolean;
  onChange: (value: boolean) => void;
  renderLabelItem: (variables: { toggleModal: () => void }) => React.ReactNode;
  renderModalItem: () => React.ReactNode;
  renderModalTitle?: string;
  showButton?: boolean;
}

const PolicyCheck = (props: PolicyCheckProps) => {
  const boolean = useBoolean();
  const { t } = useLocale();
  return (
    <div className="flex px-4 text-sm md:px-0">
      <Checkbox
        id="kvkk"
        label=""
        checked={props.value}
        onClick={() => {
          props.onChange(!props.value);
        }}
      />
      <span>{props.renderLabelItem({ toggleModal: boolean.toggle })}</span>
      <Dialog modal open={boolean.value} onOpenChange={boolean.setValue}>
        <DialogContent className="px-0 lg:min-w-[800px]">
          <DialogHeader>
            {props.renderModalTitle && (
              <DialogTitle className="pl-5">
                {props.renderModalTitle}
              </DialogTitle>
            )}
          </DialogHeader>
          <div className="scroll-bar max-h-[500px] overflow-y-scroll p-5">
            {props.renderModalItem()}
          </div>
          {props.showButton && (
            <DialogFooter className="pr-5">
              <Button
                variant="primary"
                className="btn btn-primary"
                onClick={() => {
                  props.onChange(true);
                  boolean.setValue(false);
                }}
              >
                {t("I have read, I approve")}
              </Button>
            </DialogFooter>
          )}
        </DialogContent>
      </Dialog>
    </div>
  );
};
const KvkkLabel = (props: { onClick: () => void }) => {
  const { t } = useLocale();
  return (
    <span>
      {`*${t("Within the scope of processing your personal data")}, `}
      <span
        className="cursor-pointer text-primary-500"
        onClick={props.onClick}
        onKeyDown={props.onClick}
      >
        {t("Clarification text")}
      </span>
      {` ${t("I have read and I approve.")}`}
    </span>
  );
};

const PaymentAgreementLabel = (props: { onClick: () => void }) => {
  const { t } = useLocale();
  return (
    <span>
      <span
        className="cursor-pointer text-primary-500"
        onClick={props.onClick}
        onKeyDown={props.onClick}
      >
        {`${t("Preliminary Information Form")} `}
      </span>
      ve{" "}
      <span
        className="cursor-pointer text-primary-500"
        onClick={props.onClick}
        onKeyDown={props.onClick}
      >
        {`${t("Distance Sales Agreement")} `}
      </span>
      {t("I have read and I approve.")}
    </span>
  );
};

const PaymentAgreementModalContent = (props: {
  saleAgreementText: string;
  preSaleAgreementText: string;
}) => {
  const { t } = useLocale();
  return (
    <div className="flex flex-col gap-2">
      <div className="flex flex-col">
        <h3 className="text-base font-semibold">
          {t("Preliminary Information Form")}
        </h3>
        <div className="h-[200px] overflow-scroll border p-5">
          <div
            dangerouslySetInnerHTML={{
              __html: props.preSaleAgreementText,
            }}
          />
        </div>
      </div>

      <div className="flex flex-col">
        <h3 className="text-base font-semibold">
          {t("Distance Sales Agreement")}
        </h3>
        <div className="h-[200px] overflow-scroll border p-5">
          <div
            dangerouslySetInnerHTML={{
              __html: props.saleAgreementText,
            }}
          />
        </div>
      </div>
    </div>
  );
};

const MasterpassLabel = (props: { onClick: () => void }) => {
  const { t } = useLocale();
  return (
    <span className="text-xs text-gray-500">
      {`*${t(
        "I approve that my card information is stored with the Masterpass infrastructure. Click for detailed information.",
      )}`}
      <span
        className="cursor-pointer text-xs text-primary-500"
        onClick={props.onClick}
        onKeyDown={props.onClick}
      >
        {t("Click for detailed information.")}
      </span>
    </span>
  );
};

PolicyCheck.KvkkLabel = KvkkLabel;
PolicyCheck.MasterpassLabel = MasterpassLabel;
PolicyCheck.PaymentAgreementLabel = PaymentAgreementLabel;
PolicyCheck.PaymentAgreementModalContent = PaymentAgreementModalContent;

export default PolicyCheck;