/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/click-events-have-key-events */
import dayjs from "dayjs";

import { useLocale } from "@/hooks/useLocale";
import { PriceManager } from "@/libs/price-manager/price-manager";

export interface PayPreferencesProps {
  data: {
    firstProvisionDate?: any;
    firstProvisionDay?: any;
    isCancelBook: boolean;
    isCancelPayment: boolean;
    lastProvisionDate?: any;
    lastProvisionDay?: any;
    minAmountRate: number;
    minPaymentAmount: string;
    balanceAmount: number;
    totalAmount: string;
    paymentDay?: any;
    paymentDayType?: any;
    paymentDueDate: string;
    provisionDayType?: any;
    code?: any;
  };
  activeMasterpassCidssRules: number;
  setActiveMasterpassCidssRules: (values: number) => void;
}

const PayPreferences = (props: PayPreferencesProps) => {
  const buyNowpayLater =
    +props.data.totalAmount.slice(3) !== +props.data.minPaymentAmount.slice(3);
  const { t } = useLocale();
  return (
    <div className="flex w-full flex-col gap-4">
      <div className="flex flex-col gap-1">
        <span className="text-base">{t("Payment Preferences")}</span>
        <span className="text-xs text-gray-500">
          {t(
            "Your Masterpass payment will be taken with the assurance of Jolly Tur.",
          )}
        </span>
      </div>
      {buyNowpayLater && (
        <div
          onClick={() => props.setActiveMasterpassCidssRules(0)}
          className="flex cursor-pointer flex-col gap-3"
        >
          <div
            data-active={props.activeMasterpassCidssRules === 0}
            className="flex justify-between rounded-primary border bg-white p-3 data-[active=true]:border-primary-500"
          >
            <div className="flex items-center gap-2">
              <input
                className="size-[16px] rounded-md border border-primary-500 accent-primary-500"
                type="radio"
                name="0"
                id="0"
                checked={props.activeMasterpassCidssRules === 0}
              />

              <span className="text-sm">{t("Buy now, pay later")}</span>
            </div>
            <div className="flex flex-col">
              <div className="flex items-center justify-end gap-1 ">
                <span className="text-[10px] text-gray-500">
                  {t("Amount payable now")} (%{props.data.minAmountRate})
                </span>

                <span className="text-sm text-black">
                  {PriceManager({
                    currency: props.data.minPaymentAmount.slice(0, 3),
                    value: +props.data.minPaymentAmount.slice(3),
                  })}
                </span>
              </div>
              <div className="flex items-center justify-end gap-1">
                <span className="text-[10px] text-gray-500">
                  {t("Amount payable on {{date}}", {
                    date: dayjs(props.data.paymentDueDate).format("DD.MM.YYYY"),
                  })}
                  (%
                  {100 - props.data.minAmountRate})
                </span>
                <span className="text-sm text-black">
                  {PriceManager({
                    currency: props.data.totalAmount.slice(0, 3),
                    value: +props.data.balanceAmount.toString(),
                  })}
                </span>
              </div>
            </div>
          </div>
        </div>
      )}

      <div
        onClick={() => props.setActiveMasterpassCidssRules(1)}
        className="flex cursor-pointer flex-col gap-3"
      >
        <div
          data-active={props.activeMasterpassCidssRules === 1}
          className="flex rounded-primary border bg-white p-5 data-[active=true]:border-primary-500"
        >
          <div className="flex items-center gap-2">
            <input
              className="size-[16px] rounded-md border border-primary-500 accent-primary-500"
              type="radio"
              name="1"
              id="1"
              checked={props.activeMasterpassCidssRules === 1}
            />
            <span className="text-sm">{t("Pay now")}</span>
          </div>
        </div>
      </div>
    </div>
  );
};

export { PayPreferences };