eCourt-note/components/utils/DependentDropdown.tsx

'use client';

import { useState, ChangeEvent, useEffect } from 'react';

export interface DropdownData {
  [key: string]: string[];
}

interface DependentDropdownProps {
  data: DropdownData;
  name1: string;                    // เพิ่มมาเพื่อใช้กับ Form Action
  name2: string;                    // เพิ่มมาเพื่อใช้กับ Form Action
  label1?: string;
  label2?: string;
  placeholder1?: string;
  placeholder2?: string;
  onSelectChange?: (mainValue: string, subValue: string) => void;
}

export default function DependentDropdown({
  data,
  name1,
  name2,
  label1 = 'เลือกตัวเลือกหลัก:',
  label2 = 'เลือกตัวเลือกย่อย:',
  placeholder1 = '-- กรุณาเลือก --',
  placeholder2 = '-- กรุณาเลือกตัวเลือกหลักก่อน --',
  onSelectChange,
}: DependentDropdownProps) {
  const [mainSelection, setMainSelection] = useState<string>('');
  const [subSelection, setSubSelection] = useState<string>('');

  const handleMainChange = (e: ChangeEvent<HTMLSelectElement>) => {
    const value = e.target.value;
    setMainSelection(value);
    setSubSelection(''); 
  };

  const handleSubChange = (e: ChangeEvent<HTMLSelectElement>) => {
    setSubSelection(e.target.value);
  };

  useEffect(() => {
    if (onSelectChange) {
      onSelectChange(mainSelection, subSelection);
    }
  }, [mainSelection, subSelection, onSelectChange]);

  const subOptions = mainSelection ? data[mainSelection] : [];

  return (
    <div className="space-y-4 w-full">
      {/* Dropdown ที่ 1 */}
      <div className="flex flex-col gap-1.5">
        <label className="text-sm font-medium text-ink">{label1}</label>
        <select
          name={name1} // ใส่ name ตรงนี้เพื่อให้ Server Action ดึงค่าได้
          value={mainSelection}
          onChange={handleMainChange}
          required
          className="genesis-input w-full"
        >
          <option value="">{placeholder1}</option>
          {Object.keys(data).map((key) => (
            <option key={key} value={key}>{key}</option>
          ))}
        </select>
      </div>

      {/* Dropdown ที่ 2 */}
      <div className="flex flex-col gap-1.5">
        <label className="text-sm font-medium text-ink">{label2}</label>
        <select
          name={name2} // ใส่ name ตรงนี้เพื่อให้ Server Action ดึงค่าได้
          value={subSelection}
          onChange={handleSubChange}
          disabled={!mainSelection}
          required
          className="genesis-input w-full disabled:bg-canvas disabled:text-ink-faint"
        >
          <option value="">
            {mainSelection ? '-- กรุณาเลือก --' : placeholder2}
          </option>
          {subOptions.map((item) => (
            <option key={item} value={item}>{item}</option>
          ))}
        </select>
      </div>
    </div>
  );
}