'use client';

import { useId, type ReactNode } from 'react';
import { FoxChip } from '@fox/core/components/fox-chip';
import { FoxChipArea } from '@fox/core/components/fox-chip-area';
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_MENU_OPTIONS,
  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;
  menuCodes: string[];
  onMenuCodesChange: (menuCodes: string[]) => void;
  emailField: ReactNode;
  errors: AdminMemberFormErrors;
}

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

  const allMenuValues = ADMIN_MENU_OPTIONS.map((option) => option.value);
  const isAllSelected = menuCodes.length === allMenuValues.length;

  function toggleMenu(value: string) {
    onMenuCodesChange(
      menuCodes.includes(value)
        ? menuCodes.filter((code) => code !== value)
        : [...menuCodes, value]
    );
  }

  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} />

      <div className={styles.field} role="group" aria-labelledby={menuLabelId}>
        <FoxFormLabel as="span" id={menuLabelId} requirement="required">
          메뉴 선택
        </FoxFormLabel>
        <FoxChipArea size="md" wrap labelledBy={menuLabelId}>
          <FoxChip
            type="check"
            label="전체"
            checked={isAllSelected}
            onCheckedChange={(checked) =>
              onMenuCodesChange(checked ? allMenuValues : [])
            }
          />
          {ADMIN_MENU_OPTIONS.map((option) => (
            <FoxChip
              key={option.value}
              type="check"
              label={option.label}
              checked={menuCodes.includes(option.value)}
              onCheckedChange={() => toggleMenu(option.value)}
            />
          ))}
        </FoxChipArea>
      </div>
      {menuCodes.map((code) => (
        <input key={code} type="hidden" name="menuCodes" value={code} />
      ))}
    </>
  );
}