import {
  SelectField,
  TextField
} from "@repo/rdx-ui/components";
import { Field, FieldDescription, FieldGroup, FieldLegend, FieldSet } from '@repo/shadcn-ui/components';
import { useFormContext } from "react-hook-form";
import { COUNTRY_OPTIONS } from "../../constants";
import { useTranslation } from "../../i18n";
import { CustomerFormData } from "../../schemas";

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

  return (
    <FieldSet>
      <FieldLegend>{t("form_groups.address.title")}</FieldLegend>
      <FieldDescription>{t("form_groups.address.description")}</FieldDescription>
      <FieldGroup className='grid grid-cols-1 gap-x-6 lg:grid-cols-4'>
        <TextField
          className='lg:col-span-2'
          control={control}
          name='street'
          label={t("form_fields.street.label")}
          placeholder={t("form_fields.street.placeholder")}
          description={t("form_fields.street.description")}
        />
        <TextField
          className='lg:col-span-2'
          control={control}
          name='street2'
          label={t("form_fields.street2.label")}
          placeholder={t("form_fields.street2.placeholder")}
          description={t("form_fields.street2.description")}
        />

        <TextField
          className='lg:col-span-2'
          control={control}
          name='city'
          label={t("form_fields.city.label")}
          placeholder={t("form_fields.city.placeholder")}
          description={t("form_fields.city.description")}
        />
        <TextField
          control={control}
          name='postal_code'
          label={t("form_fields.postal_code.label")}
          placeholder={t("form_fields.postal_code.placeholder")}
          description={t("form_fields.postal_code.description")}
        />

        <Field className='lg:col-span-2 lg:col-start-1'>
          <TextField
            control={control}
            name='province'
            label={t("form_fields.province.label")}
            placeholder={t("form_fields.province.placeholder")}
            description={t("form_fields.province.description")}
          />
        </Field>
        <Field className='lg:col-span-2'>
          <SelectField
            control={control}
            name='country'
            required
            label={t("form_fields.country.label")}
            placeholder={t("form_fields.country.placeholder")}
            description={t("form_fields.country.description")}
            items={[...COUNTRY_OPTIONS]}
          />
        </Field>
      </FieldGroup>
    </FieldSet>
  );
};
