import { Price, Radio } from '@akinon/next/components';
import { useLocalization } from '@akinon/next/hooks';
import { useSetSavedCardInstallmentOptionMutation } from '../redux/api';
import { useEffect, useState } from 'react';
import { SavedCard } from '../redux/reducer';
import { InstallmentTexts } from '../types';

const defaultTranslations = {
  payments: 'Payments',
  per_month: 'Per Month',
  total: 'Total'
};

type SavedCardInstallmentsProps = {
  installmentOptions: any[];
  translations?: InstallmentTexts;
  error: any;
};

const SavedCardInstallments = ({
  installmentOptions = [],
  translations,
  error
}: SavedCardInstallmentsProps) => {
  const { t } = useLocalization();
  const [installmentOption, setInstallmentOption] = useState(null);
  const [setInstallment] = useSetSavedCardInstallmentOptionMutation();

  useEffect(() => {
    if (
      installmentOptions.length > 0 &&
      installmentOptions[0]?.pk !== installmentOption
    ) {
      const firstOptionPk = installmentOptions[0].pk;
      setInstallment({
        installment: firstOptionPk
      });
      setInstallmentOption(firstOptionPk);
    }
  }, [installmentOptions, installmentOption, setInstallment]);

  if (installmentOptions.length === 0) {
    return (
      <div className="text-xs text-black-800 p-4 sm:p-6">
        {t('checkout.payment.installment_options.description')}
      </div>
    );
  }

  return (
    <div>
      <div className="px-4 mb-4 sm:px-6 sm:mb-6">
        <table className="w-full border border-solid border-gray-400">
          <thead>
            <tr>
              <th className="text-xs font-normal border-e border-solid border-gray-400 px-2 py-2 text-start">
                {translations?.payments || defaultTranslations.payments}
              </th>
              <th className="text-xs font-normal border-e border-solid border-gray-400 px-2 py-2 text-right">
                {translations?.per_month || defaultTranslations.per_month}
              </th>
              <th className="text-xs font-normal border-e border-solid border-gray-400 px-2 py-2 text-right">
                {translations?.total || defaultTranslations.total}
              </th>
            </tr>
          </thead>
          <tbody>
            {installmentOptions.map((option, index) => (
              <tr
                key={`installment-${option.pk}`}
                className="border-t border-solid border-gray-400"
              >
                <td className="text-xs font-normal border-e border-solid border-gray-400 px-2 py-2 text-left">
                  <Radio
                    value={option.pk}
                    name="installment"
                    checked={option.pk === installmentOption}
                    onChange={() => {
                      setInstallment({
                        installment: option.pk
                      });
                      setInstallmentOption(option.pk);
                    }}
                    data-testid={`saved-card-installment-${index}`}
                  >
                    <span className="w-full flex items-center justify-start pl-2">
                      <span className="text-xs text-black-800 transition-all">
                        {option.label}
                      </span>
                    </span>
                  </Radio>
                </td>
                <td className="text-xs font-normal border-e border-solid border-gray-400 px-2 py-2 text-right">
                  <Price value={option.monthly_price_with_accrued_interest} />
                </td>
                <td className="text-xs font-normal border-e border-solid border-gray-400 px-2 py-2 text-right">
                  <Price value={option.price_with_accrued_interest} />
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      {error && (
        <div className="px-6 mt-4 text-sm text-error">{String(error.message)}</div>
      )}
    </div>
  );
};

export default SavedCardInstallments;