import { FormPercentageField } from "@/components";
import { useLocalization } from "@/lib/hooks";
import { Card, CardContent, CardDescription, CardTitle, Separator } from "@/ui";
import { t } from "i18next";
import { useFormContext } from "react-hook-form";

export const QuotePricesResume = () => {
  const { watch, register, formState } = useFormContext();
  const { formatNumber, formatPercentage } = useLocalization();

  const subtotal_price = formatNumber(watch("subtotal_price"));
  const discount_price = formatPercentage(watch("discount_price"));
  const tax_price = formatPercentage(watch("tax_price"));
  const total_price = formatNumber(watch("total_price"));

  return (
    <Card className='w-full'>
      <CardContent className='flex flex-row items-end gap-2 p-4 border-t'>
        <div className='grid flex-1 h-16 grid-cols-1 auto-rows-max'>
          <div className='grid gap-1 font-semibold text-muted-foreground'>
            <CardDescription className='text-sm'>Importe neto</CardDescription>
            <CardTitle className='flex items-baseline text-2xl tabular-nums'>
              {subtotal_price}
              <span className='ml-1 text-lg tracking-normal'>€</span>
            </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("quotes.form_fields.discount.label")}
            </CardDescription>
            <FormPercentageField
              scale={2}
              disabled={formState.disabled}
              placeholder={t("quotes.form_fields.discount.placeholder")}
              {...register("discount", {
                required: false,
              })}
            />
          </div>
          <div className='grid gap-1 font-semibold text-muted-foreground'>
            <CardDescription className='text-sm'>Imp. descuento</CardDescription>
            <CardTitle className='flex items-baseline text-2xl tabular-nums'>
              {discount_price}
              <span className='ml-1 text-lg tracking-normal'>€</span>
            </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("quotes.form_fields.tax.label")}
            </CardDescription>

            <FormPercentageField
              scale={2}
              disabled={formState.disabled}
              placeholder={t("quotes.form_fields.tax.placeholder")}
              {...register("tax", {
                required: false,
              })}
            />
          </div>
          <div className='grid gap-1 font-semibold text-muted-foreground'>
            <CardDescription className='text-sm'>Importe IVA</CardDescription>
            <CardTitle className='flex items-baseline gap-1 text-2xl tabular-nums'>
              {tax_price}
              <span className='text-base font-medium tracking-normal'>€</span>
            </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'>Importe total</CardDescription>
            <CardTitle className='flex items-baseline gap-1 text-3xl tabular-nums'>
              {total_price}
              <span className='ml-1 text-lg tracking-normal'>€</span>
            </CardTitle>
          </div>
        </div>
      </CardContent>
    </Card>
  );
};