import {
  TextAreaField,
  TextField
} from "@repo/rdx-ui/components";
import {
  Field, FieldDescription, FieldGroup, FieldLegend, FieldSet, FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
  RadioGroup,
  RadioGroupItem
} from '@repo/shadcn-ui/components';
import { Controller, useFormContext, useWatch } from "react-hook-form";
import { CustomerInvoiceTaxesMultiSelect } from '../../../../../customer-invoices/src/web/components';
import { useTranslation } from "../../i18n";
import { CustomerFormData } from "../../schemas";

export const CustomerBasicInfoFields = () => {
  const { t } = useTranslation();
  const { control } = useFormContext<CustomerFormData>();

  const isCompany = useWatch({
    control,
    name: "is_company",
    defaultValue: "true",
  });

  return (
    <FieldSet>
      <FieldLegend>{t("form_groups.basic_info.title")}</FieldLegend>
      <FieldDescription>{t("form_groups.basic_info.description")}</FieldDescription>
      <FieldGroup className='grid grid-cols-1 gap-x-6 lg:grid-cols-4'>
        <Field className='lg:col-span-2'>
          <TextField
            control={control}
            name='name'
            required
            label={t("form_fields.name.label")}
            placeholder={t("form_fields.name.placeholder")}
            description={t("form_fields.name.description")}
          />
        </Field>
        <Field className='lg:col-span-2'>
          <FormField
            control={control}
            name='is_company'
            render={({ field }) => (
              <FormItem className='space-y-3'>
                <FormLabel>{t("form_fields.customer_type.label")}</FormLabel>
                <FormControl>
                  <RadioGroup
                    onValueChange={(value: string) => {
                      field.onChange(value === "false" ? "false" : "true");
                    }}
                    defaultValue={field.value ? "true" : "false"}
                    className='flex items-center gap-6'
                  >
                    <FormItem className='flex items-center space-x-2'>
                      <FormControl>
                        <RadioGroupItem id='rgi-company' value='true' />
                      </FormControl>
                      <FormLabel className='cursor-pointer' htmlFor='rgi-company'>
                        {t("form_fields.customer_type.company")}
                      </FormLabel>
                    </FormItem>
                    <FormItem className='flex items-center space-x-2'>
                      <FormControl>
                        <RadioGroupItem id='rgi-individual' value='false' />
                      </FormControl>
                      <FormLabel className='cursor-pointer' htmlFor='rgi-individual'>
                        {t("form_fields.customer_type.individual")}
                      </FormLabel>
                    </FormItem>
                  </RadioGroup>
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
        </Field>

        {isCompany === "false" ? (
          <TextField
            className='lg:col-span-full'
            control={control}
            name='trade_name'
            label={t("form_fields.trade_name.label")}
            placeholder={t("form_fields.trade_name.placeholder")}
            description={t("form_fields.trade_name.description")}
          />
        ) : (
          <></>
        )}

        <TextField
          className='lg:col-span-2 lg:col-start-1'
          control={control}
          name='reference'
          label={t("form_fields.reference.label")}
          placeholder={t("form_fields.reference.placeholder")}
          description={t("form_fields.reference.description")}
        />
        <Field className='lg:col-span-2'>
          <Controller
            control={control}
            name='default_taxes'
            render={({ field }) => (
              <CustomerInvoiceTaxesMultiSelect
                value={field.value}
                onChange={field.onChange}
                required
                label={t("form_fields.default_taxes.label")}
                placeholder={t("form_fields.default_taxes.placeholder")}
                description={t("form_fields.default_taxes.description")}
              />
            )}
          />
        </Field>
        <TextAreaField
          className='lg:col-span-full'
          control={control}
          name='legal_record'
          label={t("form_fields.legal_record.label")}
          placeholder={t("form_fields.legal_record.placeholder")}
          description={t("form_fields.legal_record.description")}
        />
      </FieldGroup>
    </FieldSet>
  );
};
