import { toolStore, setLaunchOption, setLaunchIndex } from "@/store/tool"
import { Plus, SettingConfig, Switch } from "@icon-park/react"
import { Card, CardBody, CardHeader, CardIcon, CardTool } from "../window/Card"
import { ToolButton } from "../window/ToolButton"
import { useSnapshot } from "valtio"
import { useEffect, useState } from "react"

const LaunchOption = () => {
  toolStore.start()
  const { launchOptions, launchIndex } = useSnapshot(toolStore.state)
  const [currentLaunchOption, setCurrentLaunchOption] = useState(launchOptions[0])
  useEffect(() => {
    setCurrentLaunchOption(launchOptions[launchIndex] || '')
  }, [launchIndex])

  return (
    <Card>
      <CardHeader>
        <CardIcon>
          <SettingConfig /> 启动选项
        </CardIcon>
        <CardTool>
          <ToolButton onClick={() => setLaunchIndex(0)}>1</ToolButton>
          <ToolButton onClick={() => setLaunchIndex(1)}>2</ToolButton>
          <ToolButton onClick={() => setLaunchIndex(2)}>3</ToolButton>
          <ToolButton>
            <Plus />
            添加
          </ToolButton>
          <ToolButton>
            <Switch />
            切换模式
          </ToolButton>
        </CardTool>
      </CardHeader>
      <CardBody>
        <textarea
          placeholder="请输入启动选项"
          value={currentLaunchOption}
          onChange={(e) => launchIndex !== -1 && setLaunchOption(e.target.value, launchIndex)}
          className="w-full font-mono text-base bg-transparent outline-none resize-none min-h-20"
        />
        <p>{launchIndex}</p>
      </CardBody>
    </Card>
  )
}

export default LaunchOption
