import { ITEM_GROUPS, ITEM_TYPES, getItemTypeLabel, getZoneValues } from "../../constants/classifications";
import "../../styles/components/ClassificationSection.css";

/**
 * Reusable classification component with cascading type/group/zone selects
 * @param {Object} props
 * @param {string} props.itemType - Selected item type
 * @param {string} props.itemGroup - Selected item group
 * @param {string} props.zone - Selected zone
 * @param {Function} props.onItemTypeChange - Callback for type change (newType)
 * @param {Function} props.onItemGroupChange - Callback for group change (newGroup)
 * @param {Function} props.onZoneChange - Callback for zone change (newZone)
 * @param {string} props.title - Section title (optional)
 * @param {string} props.fieldClass - CSS class for field containers (optional)
 * @param {string} props.selectClass - CSS class for select elements (optional)
 */
export default function ClassificationSection({
  itemType,
  itemGroup,
  zone,
  onItemTypeChange,
  onItemGroupChange,
  onZoneChange,
  title = "Item Classification (Optional)",
  fieldClass = "classification-field",
  selectClass = "classification-select"
}) {
  const availableGroups = itemType ? ITEM_GROUPS[itemType] || [] : [];

  const handleTypeChange = (e) => {
    const newType = e.target.value;
    onItemTypeChange(newType);
    // Parent should reset group when type changes
  };

  return (
    <div className="classification-section">
      <h3 className="classification-title">{title}</h3>

      <div className={fieldClass}>
        <label>Item Type</label>
        <select
          value={itemType}
          onChange={handleTypeChange}
          className={selectClass}
        >
          <option value="">-- Select Type --</option>
          {Object.values(ITEM_TYPES).map((type) => (
            <option key={type} value={type}>
              {getItemTypeLabel(type)}
            </option>
          ))}
        </select>
      </div>

      {itemType && (
        <div className={fieldClass}>
          <label>Item Group</label>
          <select
            value={itemGroup}
            onChange={(e) => onItemGroupChange(e.target.value)}
            className={selectClass}
          >
            <option value="">-- Select Group --</option>
            {availableGroups.map((group) => (
              <option key={group} value={group}>
                {group}
              </option>
            ))}
          </select>
        </div>
      )}

      <div className={fieldClass}>
        <label>Store Zone</label>
        <select
          value={zone}
          onChange={(e) => onZoneChange(e.target.value)}
          className={selectClass}
        >
          <option value="">-- Select Zone --</option>
          {getZoneValues().map((z) => (
            <option key={z} value={z}>
              {z}
            </option>
          ))}
        </select>
      </div>
    </div>
  );
}
