import { useToolStore } from "@/store/tool"
import { Plus, SettingConfig, Switch } from "@icon-park/react"
import { useEffect, useState } from "react"
import { Card, CardBody, CardHeader, CardIcon, CardTool } from "../window/Card"
import { ToolButton } from "../window/ToolButton"
import { input, Textarea } from "@heroui/react"

const LaunchOption = () => {
  const tool = useToolStore()
  const [launchOpt, setLaunchOpt] = useState(tool.state.launchOptions[tool.state.launchIndex] || "")

  useEffect(() => {
    setLaunchOpt(tool.state.launchOptions[tool.state.launchIndex] || "")
  }, [tool.state.launchIndex, tool.state.launchOptions])

  return (
    <Card>
      <CardHeader>
        <CardIcon>
          <SettingConfig /> 启动选项
        </CardIcon>
        <CardTool>
          {tool.state.launchOptions.map((option, index) => (
            <ToolButton key={index} onClick={() => tool.setLaunchIndex(index)}>
              {option.name || index + 1}
            </ToolButton>
          ))}
          <ToolButton onClick={() => tool.addLaunchOption({ option: "", name: "" })}>
            <Plus />
            添加
          </ToolButton>
          <ToolButton>
            <Switch />
            切换模式
          </ToolButton>
        </CardTool>
      </CardHeader>
      <CardBody>
        <textarea
          placeholder="请输入启动选项"
          value={launchOpt.option}
          onChange={(e) => {
            if (tool.state.launchIndex < 0 || tool.state.launchIndex > 10) return
            setLaunchOpt({ option: e.target.value, name: launchOpt.name })
            tool.setLaunchOption(
              { option: e.target.value, name: launchOpt.name },
              tool.state.launchIndex
            )
          }}
          className="w-full font-mono text-base bg-transparent outline-none resize-none min-h-20 max-h-32"
        />
      </CardBody>
    </Card>
  )
}

export default LaunchOption
