"use client"
import React from "react";
import Label from '@/components/form/Label2';
import Input from '@/components/form/input/InputField2';
import Select from '@/components/form/Select2';
import Button from "./ui/button/Button2";
import WithLabel from "./form/WithLabel";
import { PlusIcon } from "@/icons";

interface DeviceGoodsItem {
  slot: string;
  goods_id: number;
  price?: number;
  inventory?: number;
  inventory_max?: number;
  inventory_alarm?: number;
  idx?: number;
}

interface DeviceGoodsListProps {
  deviceGoodsList: DeviceGoodsItem[];
  inventroySetValue: {
    inventory?: number;
    inventory_max?: number;
    inventory_alarm?: number;
  };
  onChangeInventorySetValue: (field: 'inventory' | 'inventory_max' | 'inventory_alarm', value: number) => void;
  optGoodsList: { label: string; value: string; }[];
  onSlotChange: (index: number, value: string) => void;
  onGoodsChange: (index: number, value: string) => void;
  onInventoryChange: (index: number, value: string) => void;
  onInventoryMaxChange: (index: number, value: string) => void;
  onInventoryAlarmChange: (index: number, value: string) => void;
  onClickAdd: () => void;
}

export default function DeviceGoodsList({
  deviceGoodsList,
  optGoodsList,
  inventroySetValue,
  onChangeInventorySetValue,
  onSlotChange,
  onGoodsChange,
  onInventoryChange,
  onInventoryMaxChange,
  onInventoryAlarmChange,
  onClickAdd,
}: DeviceGoodsListProps) {
  const handleApplyInventoryBatch = () => {
    deviceGoodsList.forEach((_, index) => {
      onInventoryChange(index, String(inventroySetValue.inventory));
    });
  };

  const handleApplyInventoryMaxBatch = () => {
    deviceGoodsList.forEach((_, index) => {
      onInventoryMaxChange(index, String(inventroySetValue.inventory_max));
    });
  };

  const handleApplyInventoryAlarmBatch = () => {
    deviceGoodsList.forEach((_, index) => {
      onInventoryAlarmChange(index, String(inventroySetValue.inventory_alarm));
    });
  };

  const handleApplyInventoryMaxValue = (index: number) => {
    onInventoryChange(index, String(deviceGoodsList[index].inventory_max || 0));
  };
  return (
    <>
    <div className="grid grid-cols-1 gap-3">
      <div>
        <div className="flex gap-2">
          <div className={"w-20"}>
          </div>
          <div className="w-50">
          </div>
          <div className={"w-24"}>
            <Button size="sm" variant="primary" className="w-full" onClick={handleApplyInventoryBatch}>일괄적용</Button>
          </div>
          <div className={"w-24"}>
            <Button size="sm" variant="primary" className="w-full" onClick={handleApplyInventoryAlarmBatch}>일괄적용</Button>
          </div>
          <div className={"w-24"}>
            <Button size="sm" variant="primary" className="w-full" onClick={handleApplyInventoryMaxBatch}>일괄적용</Button>
          </div>
          <div className={"w-40"}>
          </div>
        </div>
      </div>
      
      <div>
        <div className="flex gap-2">
          <div className={"w-20"}>
          </div>
          <div className="w-50">
          </div>
          <div className={"w-24"}>
            <Input 
              type="number" 
              placeholder="설정값" 
              value={inventroySetValue?.inventory || 0} 
              onChange={(e) => onChangeInventorySetValue('inventory', Number(e.target.value) || 0)}
              className="w-full" 
            />
          </div>
          <div className={"w-24"}>
            <Input 
              type="number" 
              placeholder="설정값" 
              value={inventroySetValue?.inventory_alarm || 0} 
              onChange={(e) => onChangeInventorySetValue('inventory_alarm', Number(e.target.value) || 0)}
              className="w-full" 
            />
          </div>
          <div className={"w-24"}>
            <Input 
              type="number" 
              placeholder="설정값" 
              value={inventroySetValue?.inventory_max || 0} 
              onChange={(e) => onChangeInventorySetValue('inventory_max', Number(e.target.value) || 0)}
              className="w-full" 
            />
          </div>
          <div className={"w-40"}>
          </div>
        </div>
      </div>

      <div>
        <div className="flex gap-2">
          <div className={"w-20"}>
            <Label>컬럼번호</Label>
          </div>
          <div className="w-50">
            <Label>상품명(상품코드)</Label>
          </div>
          <div className={"w-24"}>
            <Label>잔여수량</Label>
          </div>
          <div className={"w-24"}>
            <Label>부족알림 수량</Label>
          </div>
          <div className={"w-24"}>
            <Label>최대 잔여수량</Label>
          </div>
          <div className={"w-40"}>
          </div>
        </div>
      </div>
      {deviceGoodsList.map((item, index) => (
        <div key={index} className="mb-2">          
          <div className="flex gap-2">
            <div className={"w-20"}>
              <Input 
                type="text" 
                placeholder="컬럼번호2" 
                value={item.slot} 
                onChange={(e) => onSlotChange(index, e.target.value)} 
              />
            </div>
            <div className="w-50">
              <Select
                placeholder="상품을 선택하세요"
                options={optGoodsList}
                defaultValue={item.goods_id == 0 ? "" : String(item.goods_id)}
                onChange={(value) => onGoodsChange(index, value)}
                className="dark:bg-dark-900" 
              />
            </div>
            <div className={"w-24"}>
              <Input 
                type="number" 
                placeholder="수량" 
                value={item.inventory || 0} 
                onChange={(e) => onInventoryChange(index, e.target.value)} 
              />
            </div>
            <div className={"w-24"}>
              <Input 
                type="number" 
                placeholder="부족알림 수량" 
                value={item.inventory_alarm || 0} 
                onChange={(e) => onInventoryAlarmChange(index, e.target.value)} 
              />
            </div>
            <div className={"w-24"}>
              <Input 
                type="number" 
                placeholder="최대 잔여수량" 
                value={item.inventory_max || 0} 
                onChange={(e) => onInventoryMaxChange(index, e.target.value)} 
              />
            </div>
            <div className={"w-42"}>
              <Button size="sm" variant="primary" onClick={() => handleApplyInventoryMaxValue(index)}>잔여수량 최대값 적용</Button>
            </div>
          </div>
        </div>
      ))}
    </div>
    <Button size="sm" variant="primary" startIcon={<PlusIcon />} onClick={onClickAdd}>새 컬럼 추가</Button>
    </>
  );
}
