"use client";

import type { Control } from "react-hook-form";
import { useWatch } from "react-hook-form";

import { stockFieldLabels } from "@/components/form/common/field-labels";
import { FormSectionLayout } from "@/components/form/common/form-section-layout";
import { SelectField } from "@/components/form/fields/select-field";
import { TextField } from "@/components/form/fields/text-field";
import type { ModuleTransactionFormValues } from "@/components/form/schemas/module-transaction-schema";

const OTHER_TRANSACTION_TYPE = "1524";

type AdditionalModuleFieldsProps = {
  control: Control<ModuleTransactionFormValues>;
  executionOptions: readonly string[];
  transactionOptions: readonly string[];
};

export function AdditionalModuleFields({
  control,
  executionOptions,
  transactionOptions,
}: AdditionalModuleFieldsProps) {
  const transaction = useWatch({ control, name: "transaction" });
  const showTransactionOther = transaction === OTHER_TRANSACTION_TYPE;

  return (
    <FormSectionLayout>
      <SelectField
        control={control}
        name="execution_type"
        label={stockFieldLabels.execution_type}
        options={executionOptions}
      />
      <SelectField
        control={control}
        name="transaction"
        label={stockFieldLabels.transaction}
        options={transactionOptions}
      />
      {showTransactionOther ? (
        <TextField
          control={control}
          name="t_o_t_other"
          label={stockFieldLabels.t_o_t_other}
        />
      ) : null}
      <TextField control={control} name="currency" label={stockFieldLabels.currency} placeholder="USD" />
    </FormSectionLayout>
  );
}