/* 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";

/* eslint-disable jsx-a11y/no-static-element-interactions */
export interface InstallmentListProps {
  value: string;
  activeMasterpassCidssRules: number;
  payableDate: string;
  onChange: (value: string) => void;
  options: {
    key: string;
    selected: boolean;
    installmentCount: number;
    additionalInstallmentCount: number;
    installmentCountText: string;
    monthlyAmountNow: number;
    monthlyAmountLater: number;
    discountRate: string;
    totalPriceNow: number;
    totalPriceLater: number;
    totalPrice: number;
    providerName: string;
    originalKey: any;
    postCost: number;
    bankCode: string;
    macroMerchantId: string;
  }[];
}

const InstallmentList = (props: InstallmentListProps) => {
  const { t } = useLocale();
  return (
    <div>
      <div className="flex px-3 text-sm text-gray-500">
        <div className="w-[50px]" />
        <div className="w-[200px] text-left ">
          {t("Number of Installments")}
        </div>
        <div className="w-[300px] text-center">
          {props.activeMasterpassCidssRules === 1 ? (
            <div>{t("Monthly Amount")}</div>
          ) : (
            <div className="flex ">
              <div className="flex w-[150px] justify-start">{t("Now")}</div>
              <div className="flex w-[150px] justify-end ">{`${t(
                "from {{date}}",
                { date: dayjs(props.payableDate).format("DD.MM.YYYY") },
              )}`}</div>
            </div>
          )}
        </div>

        <div className="w-[150px] text-right">{t("Total Price")}</div>
      </div>
      {props.options.map((option) => (
        <div
          onClick={() => props.onChange(option.key)}
          key={option.key}
          data-active={props.value === option.key}
          className="mt-2 flex cursor-pointer rounded-primary border bg-white p-3 text-sm font-medium text-gray-600 data-[active=true]:border-primary-500"
        >
          <div className="w-[50px]">
            <input type="radio" checked={props.value === option.key} />
          </div>
          <div className="w-[200px] grow text-left font-normal">
            {option.installmentCountText}
          </div>
          <div className="w-[300px] text-center">
            {props.activeMasterpassCidssRules === 1 ? (
              <div className="flex w-[300px] justify-center">
                {PriceManager({
                  currency: "TRY",
                  value: option.monthlyAmountNow,
                })}
              </div>
            ) : (
              <div className="flex justify-between">
                <div className="flex w-[150px] flex-col items-start justify-start">
                  {`${PriceManager({
                    currency: "TRY",
                    value: option.monthlyAmountNow,
                  })} x ${option.installmentCount}`}
                  <span>
                    {PriceManager({
                      currency: "TRY",
                      value: option.totalPriceNow,
                    })}
                  </span>
                </div>
                <div className="flex w-[120px] flex-col items-start justify-start">
                  <span>
                    {`${PriceManager({
                      currency: "TRY",
                      value: option.monthlyAmountLater,
                    })} x ${option.installmentCount} `}
                  </span>
                  <span>
                    {PriceManager({
                      currency: "TRY",
                      value: option.totalPriceLater,
                    })}
                  </span>
                </div>
              </div>
            )}
          </div>

          <div className="w-[150px] text-right">
            {PriceManager({
              currency: "TRY",
              value: option.totalPrice,
            })}
          </div>
        </div>
      ))}
    </div>
  );
};
export { InstallmentList };