import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
  Separator,
} from "@repo/shadcn-ui/components";
import { useFormContext } from "react-hook-form";
import { useTranslation } from "../i18n";
import { formatCurrency } from "../pages/create/utils";

export const CustomerInvoicePricesCard = () => {
  const { t } = useTranslation();
  const { register, formState, control, watch } = useFormContext();

  /*const pricesWatch = useWatch({ control, name: ["subtotal_price", "discount", "tax"] });

  const totals = calculateQuoteTotals(pricesWatch);

  const subtotal_price = formatNumber(totals.subtotalPrice);
  const discount_price = formatNumber(totals.discountPrice);
  const tax_price = formatNumber(totals.taxesPrice);
  const total_price = formatNumber(totals.totalPrice);*/

  const currency_symbol = watch("currency");

  return (
    <Card>
      <CardHeader>
        <CardTitle>Impuestos y Totales</CardTitle>
        <CardDescription>Configuración de impuestos y resumen de totales</CardDescription>
      </CardHeader>

      <CardContent className='flex flex-row items-end gap-2 p-4'>
        <div className='grid flex-1 h-16 grid-cols-1 auto-rows-max'>
          <div className='grid gap-1 font-semibold text-right text-muted-foreground'>
            <CardDescription className='text-sm'>
              {t("form_fields.subtotal_price.label")}
            </CardDescription>
            <CardTitle className='flex items-baseline justify-end text-2xl tabular-nums'>
              {formatCurrency(watch("subtotal_price.amount"), 2, watch("currency"))}
            </CardTitle>
          </div>
        </div>
        <Separator orientation='vertical' className='w-px h-16 mx-2' />
        <div className='grid flex-1 h-16 grid-cols-2 gap-6 auto-rows-max'>
          <div className='grid gap-1 font-medium text-muted-foreground'>
            <CardDescription className='text-sm'>{t("form_fields.discount.label")}</CardDescription>
          </div>
          <div className='grid gap-1 font-semibold text-muted-foreground'>
            <CardDescription className='text-sm text-right'>
              {t("form_fields.discount_price.label")}
            </CardDescription>
            <CardTitle className='flex items-baseline justify-end text-2xl tabular-nums'>
              {"-"} {formatCurrency(watch("discount_price.amount"), 2, watch("currency"))}
            </CardTitle>
          </div>
        </div>
        <Separator orientation='vertical' className='w-px h-16 mx-2' />
        <div className='grid flex-1 h-16 grid-cols-2 gap-6 auto-rows-max'>
          <div className='grid gap-1 font-medium text-muted-foreground'>
            <CardDescription className='text-sm'>{t("form_fields.tax.label")}</CardDescription>
          </div>
          <div className='grid gap-1 font-semibold text-muted-foreground'>
            <CardDescription className='text-sm text-right'>
              {t("form_fields.tax_price.label")}
            </CardDescription>
            <CardTitle className='flex items-baseline justify-end gap-1 text-2xl tabular-nums'>
              {formatCurrency(watch("tax_price.amount"), 2, watch("currency"))}
            </CardTitle>
          </div>
        </div>{" "}
        <Separator orientation='vertical' className='w-px h-16 mx-2' />
        <div className='grid flex-1 h-16 grid-cols-1 auto-rows-max'>
          <div className='grid gap-0'>
            <CardDescription className='text-sm font-semibold text-right text-foreground'>
              {t("form_fields.total_price.label")}
            </CardDescription>
            <CardTitle className='flex items-baseline justify-end gap-1 text-3xl tabular-nums'>
              {formatCurrency(watch("total_price.amount"), 2, watch("currency"))}
            </CardTitle>
          </div>
        </div>
      </CardContent>
    </Card>
  );
};