import type { Character, GameItem } from "../types";
import { getTalentGearSlotsBonus } from "../utils/talent-effects";
import GearList from "./GearList";
import styles from "./GearPanel.module.css";

interface GearPanelProps {
  character: Character;
  mode: "view" | "edit";
  onAddGearFromItem: (characterId: number, item: GameItem) => void;
  onAddGearCustom: (
    characterId: number,
    data: { name: string; type: string; slot_count: number },
  ) => void;
  onRemoveGear: (characterId: number, gearId: number) => void;
  onCurrencyChange: (
    characterId: number,
    field: "gp" | "sp" | "cp",
    value: number,
  ) => void;
}

export default function GearPanel({
  character,
  mode,
  onAddGearFromItem,
  onAddGearCustom,
  onRemoveGear,
  onCurrencyChange,
}: GearPanelProps) {
  const slotsUsed = character.gear.reduce((sum, g) => sum + g.slot_count, 0);
  const slotsMax =
    character.gear_slots_max + getTalentGearSlotsBonus(character);

  return (
    <div className={styles.panel}>
      <GearList
        gear={character.gear}
        gp={character.gp}
        sp={character.sp}
        cp={character.cp}
        slotsUsed={slotsUsed}
        slotsMax={slotsMax}
        onAddFromItem={(item) => onAddGearFromItem(character.id, item)}
        onAddCustom={(data) => onAddGearCustom(character.id, data)}
        onRemove={(gearId) => onRemoveGear(character.id, gearId)}
        onCurrencyChange={(field, value) =>
          onCurrencyChange(character.id, field, value)
        }
        mode={mode}
      />
    </div>
  );
}
