import { TaxesMultiSelectField } from "@erp/core/components";
import { SelectField, TextAreaField } from "@repo/rdx-ui/components";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@repo/shadcn-ui/components";
import { Control } from "react-hook-form";
import { CURRENCY_OPTIONS, LANGUAGE_OPTIONS } from "../../constants";
import { useTranslation } from "../../i18n";
import { CustomerUpdateData } from "../../schemas";

export const CustomerAdditionalConfigFields = ({
  control,
}: { control: Control<CustomerUpdateData> }) => {
  const { t } = useTranslation();

  return (
    <Card className='border-0 shadow-none'>
      <CardHeader>
        <CardTitle>{t("form_groups.preferences.title")}</CardTitle>
        <CardDescription>{t("form_groups.preferences.description")}</CardDescription>
      </CardHeader>
      <CardContent className='grid grid-cols-1 gap-y-8 gap-x-6 @xl:grid-cols-2'>
        <TaxesMultiSelectField
          control={control}
          name='default_taxes'
          required
          label={t("form_fields.default_taxes.label")}
          placeholder={t("form_fields.default_taxes.placeholder")}
          description={t("form_fields.default_taxes.description")}
        />
        <SelectField
          control={control}
          name='language_code'
          required
          label={t("form_fields.language_code.label")}
          placeholder={t("form_fields.language_code.placeholder")}
          description={t("form_fields.language_code.description")}
          items={[...LANGUAGE_OPTIONS]}
        />
        <SelectField
          control={control}
          name='currency_code'
          required
          label={t("form_fields.currency_code.label")}
          placeholder={t("form_fields.currency_code.placeholder")}
          description={t("form_fields.currency_code.description")}
          items={[...CURRENCY_OPTIONS]}
        />
        <TextAreaField
          control={control}
          name='legal_record'
          required
          label={t("form_fields.legal_record.label")}
          placeholder={t("form_fields.legal_record.placeholder")}
          description={t("form_fields.legal_record.description")}
        />
      </CardContent>
    </Card>
  );
};