import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
import type { UseFormReturn } from "react-hook-form";
import { useTranslation } from "react-i18next";

import type { MailConfigurationInput } from "../../../../common/mail-configurations";
import { MailConfigurationInputSchema } from "../../../../common/mail-configurations";

export function MailConfigurationTargets({
  prefix,
  form,
  fixed,
  initialProfileId,
  ready,
  states,
  profiles,
  mailboxes,
  onQuickCreate,
}: {
  prefix: string;
  form: UseFormReturn<MailConfigurationInput>;
  fixed: boolean;
  initialProfileId: string;
  ready: boolean;
  states: readonly string[];
  profiles: readonly { value: string; label: string }[];
  mailboxes: readonly { value: string; label: string }[];
  onQuickCreate: (kind: "profile" | "mailbox") => void;
}) {
  const { t } = useTranslation("companies");
  const values = form.watch();

  return (
    <div className="grid gap-4 sm:grid-cols-2">
      <div className="space-y-2">
        <FormLabel htmlFor={`${prefix}-profile`} required>
          {t("mail.profile")}
        </FormLabel>
        <SelectWithAction
          action={
            fixed || initialProfileId
              ? undefined
              : { label: t("profiles.new"), onClick: () => onQuickCreate("profile") }
          }
          disabled={fixed || !!initialProfileId || !ready}
          id={`${prefix}-profile`}
          label={t("mail.profile")}
          onValueChange={(id) => form.setValue("profileId", id)}
          options={profiles}
          placeholder={t("mail.choose")}
          required
          value={values.profileId}
        />
      </div>
      <div className="space-y-2">
        <FormLabel htmlFor={`${prefix}-mailbox`} required>
          {t("mailbox.titleSingle")}
        </FormLabel>
        <SelectWithAction
          action={
            fixed ? undefined : { label: t("mailbox.new"), onClick: () => onQuickCreate("mailbox") }
          }
          disabled={fixed || !ready}
          id={`${prefix}-mailbox`}
          label={t("mailbox.titleSingle")}
          onValueChange={(id) => form.setValue("mailboxId", id)}
          options={mailboxes}
          placeholder={t("mail.choose")}
          required
          value={values.mailboxId}
        />
      </div>
      <div className="space-y-2">
        <FormLabel htmlFor={`${prefix}-method`} required>
          {t("mail.method")}
        </FormLabel>
        <SelectWithAction
          id={`${prefix}-method`}
          label={t("mail.method")}
          onValueChange={(value) => {
            const parsed = MailConfigurationInputSchema.shape.method.safeParse(value);

            if (parsed.success) {
              form.setValue("method", parsed.data);
            }
          }}
          options={MailConfigurationInputSchema.shape.method.options.map((method) => ({
            value: method,
            label: t(`mail.${method}`),
          }))}
          placeholder={t("mail.choose")}
          required
          value={values.method}
        />
      </div>
      <div className="space-y-2">
        <FormLabel htmlFor={`${prefix}-state`} required>
          {t("mail.state")}
        </FormLabel>
        <SelectWithAction
          id={`${prefix}-state`}
          label={t("mail.state")}
          onValueChange={(value) => {
            const parsed = MailConfigurationInputSchema.shape.state.safeParse(value);

            if (parsed.success) {
              form.setValue("state", parsed.data);
            }
          }}
          options={states.map((state) => ({ value: state, label: t(`mail.${state}`) }))}
          placeholder={t("mail.choose")}
          required
          value={values.state}
        />
      </div>
    </div>
  );
}