import { FieldDescription, FieldGroup, FieldLegend, FieldSet } from '@repo/shadcn-ui/components';
import { useFormContext } from "react-hook-form";

import { ComponentProps } from 'react';
import { useTranslation } from "../../../i18n";
import { RecipientModalSelectorField } from "./recipient-modal-selector-field";

export const InvoiceRecipient = (props: ComponentProps<"fieldset">) => {
  const { t } = useTranslation();
  const { control, getValues } = useFormContext();

  const recipient = getValues("recipient");

  return (
    <FieldSet {...props}>
      <FieldLegend className='hidden text-foreground' variant='label'>
        {t('form_groups.recipient.title')}
      </FieldLegend>
      <FieldDescription className='hidden'>{t("form_groups.recipient.description")}</FieldDescription>

      <FieldGroup className='flex flex-row flex-wrap gap-6 xl:flex-nowrap'>
        <RecipientModalSelectorField
          control={control}
          name='customer_id'
          label={t('form_groups.customer.title')}
          initialRecipient={recipient}
        />
      </FieldGroup>
    </FieldSet>
  );
};
