import { Checkbox, Typography } from "@material-tailwind/react";
import React, { useState } from "react";

import { usePayments } from "../../hooks/usePayments";
import { _useScopedI18n } from "../../i18n/client";
import { notification } from "../../utils/notifications.util";
import ButtonCustom from "../Button";

type WalletTermsAndConditionComponentProps = {
  onConsentAccepted: () => void; // Prop to accept the consent
};

export default function WalletTermsAndConditionComponent({
  onConsentAccepted,
}: WalletTermsAndConditionComponentProps) {
  //
  const scopeT = _useScopedI18n("payment.walletTermsAndConditionComponent");

  const [acceptTerms, setAcceptTerms] = useState(false);

  const { acceptWalletConsent } = usePayments({});

  const handleAcceptConsent = async () => {
    try {
      await acceptWalletConsent.mutateAsync();

      notification.apiNotify({
        status: true,
        message: scopeT("consentAcceptedMsg"),
      });
      onConsentAccepted();
    } catch (error) {
      console.log("🚀 ~ handleAcceptConsent ~ error:", error);
      notification.apiNotify({
        status: false,
        message: scopeT("consentErrorMsg"),
      });
    }
  };

  return (
    <React.Fragment>
      <div className="flex flex-col justify-center items-center p-2 gap-4">
        <Checkbox
          color="green"
          label={
            <Typography className="font-normal text-sm text-center">
              {scopeT("consentClickMsg")}
              <Typography
                target="_blank"
                as="a"
                href="https://docs.horysmall.com/legal-docs/terms-and-conditions"
                color="purple"
                className="inline text-sm font-medium transition-colors hover:text-purple-600"
              >
                &nbsp; {scopeT("termsAndC")} &nbsp;
              </Typography>
              {scopeT("and")}
              <Typography
                target="_blank"
                as="a"
                href="https://docs.horysmall.com/legal-docs/privacy-policy"
                color="purple"
                className="inline text-sm font-medium transition-colors hover:text-purple-600"
              >
                &nbsp; {scopeT("privacyP")}
              </Typography>
              .
            </Typography>
          }
          crossOrigin={undefined}
          checked={acceptTerms}
          onChange={() => {
            setAcceptTerms((prev) => !prev);
          }}
        />

        <ButtonCustom
          disabled={!acceptTerms}
          onClick={handleAcceptConsent}
          className="inline-block"
          icon={undefined}
        >
          {scopeT("importBtn")}
        </ButtonCustom>
      </div>
    </React.Fragment>
  );
}
