import { CloseSmall, Down, Edit, Plus, SettingConfig, Up } from "@icon-park/react"
import { useState } from "react"
import { Card, CardBody, CardHeader, CardIcon, CardTool } from "../window/Card"
import { ToolButton } from "../window/ToolButton"
import { addToast, NumberInput, Tab, Tabs, Tooltip } from "@heroui/react"
import { motion } from "framer-motion"
import { useToolStore } from "@/store/tool"

const VideoSetting = () => {
  const [hide, setHide] = useState(false)
  const [edit, setEdit] = useState(false)
  const tool = useToolStore()
  // const [launchOpt, setLaunchOpt] = useState(tool.state.VideoSettings[tool.state.launchIndex] || "")

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

  // 设置对应关系
  // TODO Value通过实际数值映射
  const videoSettings = [
    { type: "", title: "全屏", value: "全屏", options: ["窗口", "全屏"] },
    { type: "", title: "垂直同步", value: "关闭", options: ["关闭", "开启"] },
    { type: "", title: "低延迟模式", value: "关闭", options: ["关闭", "开启"] },
    { type: "", title: "增强角色对比度", value: "禁用", options: ["禁用", "启用"] },
    { type: "", title: "CMAA2抗锯齿", value: "关闭", options: ["关闭", "开启"] },
    {
      type: "",
      title: "多重采样抗锯齿",
      value: "2X MSAA",
      options: ["无", "2X MSAA", "4X MSAA", "8X MSAA"],
    },
    { type: "", title: "全局阴影效果", value: "低", options: ["低", "中", "高", "非常高"] },
    { type: "", title: "动态阴影", value: "全部", options: ["仅限日光", "全部"] },
    { type: "", title: "模型/贴图细节", value: "中", options: ["低", "中", "高"] },
    {
      type: "",
      title: "贴图过滤模式",
      value: "异向 4X",
      options: ["双线性", "三线性", "异向 2X", "异向 4X", "异向 8X", "异向 16X"],
    },
    { type: "", title: "光影细节", value: "低", options: ["低", "高"] },
    { type: "", title: "粒子细节", value: "低", options: ["低", "中", "高", "非常高"] },
    { type: "", title: "环境光遮蔽", value: "已禁用", options: ["已禁用", "中", "高"] },
    { type: "", title: "高动态范围", value: "性能", options: ["性能", "品质"] },
    {
      type: "",
      title: "Fidelity FX 超级分辨率",
      value: "已禁用",
      options: ["性能", "均衡", "品质", "超高品质", "已禁用"],
    },
  ]

  return (
    <Tooltip content="功能测试中，尚未实装" showArrow={true} delay={300}>
      <Card>
        <CardHeader>
          <CardIcon>
            <SettingConfig /> 视频设置
          </CardIcon>
          <CardTool>
            {/* {tool.state.VideoSettings.map((option, index) => (
            <ToolButton key={index} onClick={() => tool.setLaunchIndex(index)}>
              {index + 1}
            </ToolButton>
          ))} */}
            {edit && (
              <>
                <ToolButton>低</ToolButton>
                <ToolButton>中</ToolButton>
                <ToolButton>高</ToolButton>
                <ToolButton>非常高</ToolButton>
                <ToolButton>推荐</ToolButton>
                <ToolButton
                  onClick={() => {
                    addToast({ title: "测试中 功能完成后可应用设置到游戏" })
                  }}
                >
                  <Plus />
                  应用
                </ToolButton>
              </>
            )}
            <ToolButton onClick={() => setEdit(!edit)}>
              {edit ? (
                <>
                  <CloseSmall />
                  取消编辑
                </>
              ) : (
                <>
                  <Edit />
                  编辑
                </>
              )}
            </ToolButton>
            <ToolButton onClick={() => setHide(!hide)}>
              {hide ? (
                <>
                  <Up />
                  显示
                </>
              ) : (
                <>
                  <Down />
                  隐藏
                </>
              )}
            </ToolButton>
          </CardTool>
        </CardHeader>
        {!hide && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.2 }}
          >
            <CardBody>
              <ul className="flex flex-wrap gap-3 mt-1">
                <li className="flex flex-col gap-1.5">
                  <span className="ml-2">分辨率</span>
                  <span className="flex gap-3">
                    <NumberInput
                      aria-label="width"
                      value={tool.state.videoSetting.width}
                      onValueChange={(value) => {
                        tool.setVideoSetting({
                          ...tool.state.videoSetting,
                          width: value,
                        })
                      }}
                      radius="full"
                      step={10}
                      className="max-w-28"
                      classNames={{ inputWrapper: "h-10" }}
                    />
                    <NumberInput
                      aria-label="height"
                      value={tool.state.videoSetting.height}
                      onValueChange={(value) => {
                        tool.setVideoSetting({
                          ...tool.state.videoSetting,
                          height: value,
                        })
                      }}
                      radius="full"
                      step={10}
                      className="max-w-28"
                      classNames={{ inputWrapper: "h-10" }}
                    />
                  </span>
                </li>
                {videoSettings.map((vid, index) => (
                  <li className="flex flex-col gap-1.5" key={index}>
                    <span className="ml-2">{vid.title}</span>
                    <Tabs
                      selectedKey={vid.value}
                      size="md"
                      radius="full"
                      className="min-w-36"
                      fullWidth
                    >
                      {vid.options.map((opt, _) => (
                        <Tab key={opt} title={opt} />
                      ))}
                    </Tabs>
                  </li>
                ))}
              </ul>
            </CardBody>
          </motion.div>
        )}
      </Card>
    </Tooltip>
  )
}

export default VideoSetting
