'use client';

import { useId, type ReactNode } from 'react';
import { FoxFormLabel } from '@fox/core/components/fox-form-label';
import { FoxPhoneNumber } from '@fox/core/components/fox-phone-number';
import { FoxSelect } from '@fox/core/components/fox-select';
import { ADMIN_ROLE_OPTIONS } from '@/lib/domain/admin-member';
import type { AdminMemberFormErrors } from '@/lib/domain/admin-member-form';
import { MOBILE_PHONE_PREFIXES } from '@/lib/domain/phone-number';
import styles from './admin-member-modal.module.scss';

interface AdminMemberFormFieldsProps {
  phoneNumber: string;
  onPhoneNumberChange: (phoneNumber: string) => void;
  roleCode: string;
  onRoleCodeChange: (roleCode: string) => void;
  emailField: ReactNode;
  errors: AdminMemberFormErrors;
}

export function AdminMemberFormFields({
  phoneNumber,
  onPhoneNumberChange,
  roleCode,
  onRoleCodeChange,
  emailField,
  errors,
}: AdminMemberFormFieldsProps) {
  const phoneLabelId = useId();

  return (
    <>
      <div className={styles.field} role="group" aria-labelledby={phoneLabelId}>
        <FoxFormLabel as="span" id={phoneLabelId} requirement="required">
          휴대전화 번호
        </FoxFormLabel>
        <FoxPhoneNumber
          type="unit"
          prefixOptions={[...MOBILE_PHONE_PREFIXES]}
          value={phoneNumber}
          onChange={onPhoneNumberChange}
          message={errors.phoneNumber}
          invalid={Boolean(errors.phoneNumber)}
        />
      </div>
      <input type="hidden" name="phoneNumber" value={phoneNumber} />

      {emailField}

      <FoxSelect
        size="md"
        label="역할 선택"
        options={ADMIN_ROLE_OPTIONS.map((option) => ({
          value: option.value,
          label: option.label,
        }))}
        value={roleCode}
        onValueChange={onRoleCodeChange}
        error={Boolean(errors.roleCode)}
        hint={errors.roleCode}
      />
      <input type="hidden" name="roleCode" value={roleCode} />
    </>
  );
}