import { useMemo } from 'react';

import { Database } from '@/packages/supabase/src/database.types';

import { Trans } from '@kit/ui/makerkit/trans';
import { Separator } from '@kit/ui/separator';

const YearlyExpensesOverview = ({
  employeeCount = 0,
  companyParams,
}: {
  employeeCount?: number;
  companyParams: Database['medreport']['Tables']['company_params']['Row'];
}) => {
  const monthlyExpensePerEmployee = useMemo(() => {
    if (!companyParams.benefit_amount) {
      return '0.00';
    }

    switch (companyParams.benefit_occurance) {
      case 'yearly':
        return (companyParams.benefit_amount / 12).toFixed(2);
      case 'quarterly':
        return (companyParams.benefit_amount / 4).toFixed(2);
      case 'monthly':
        return companyParams.benefit_amount.toFixed(2);
      default:
        return '0.00';
    }
  }, [companyParams]);

  const maxYearlyExpensePerEmployee = useMemo(() => {
    if (!companyParams.benefit_amount) {
      return '0.00';
    }

    switch (companyParams.benefit_occurance) {
      case 'yearly':
        return companyParams.benefit_amount.toFixed(2);
      case 'quarterly':
        return (companyParams.benefit_amount * 4).toFixed(2);
      case 'monthly':
        return (companyParams.benefit_amount * 12).toFixed(2);
      default:
        return '0.00';
    }
  }, [companyParams]);

  return (
    <div className="border-border rounded-lg border p-6">
      <h5>
        <Trans i18nKey="billing:expensesOverview.title" />
      </h5>
      <div className="mt-5 flex justify-between">
        <p className="text-sm font-medium">
          <Trans i18nKey="billing:expensesOverview.monthly" />
        </p>
        <span className="text-primary text-sm font-bold">
          {monthlyExpensePerEmployee} €
        </span>
      </div>
      <div className="mt-3 flex justify-between">
        <p className="text-sm font-medium">
          <Trans i18nKey="billing:expensesOverview.yearly" />
        </p>
        <span className="text-sm font-medium">
          {maxYearlyExpensePerEmployee} €
        </span>
      </div>
      <div className="mt-5 mb-3 flex justify-between">
        <p className="text-sm font-medium">
          <Trans
            i18nKey="billing:expensesOverview.total"
            values={{ employeeCount: employeeCount || 0 }}
          />
        </p>
        <span className="text-sm font-medium">
          {(Number(maxYearlyExpensePerEmployee) * employeeCount).toFixed(2)} €
        </span>
      </div>
      <Separator />
      <div className="mt-4 flex justify-between">
        <p className="font-semibold">Kokku</p>
        <span className="font-semibold">13 200,00 €</span>
      </div>
    </div>
  );
};

export default YearlyExpensesOverview;