"use client"
import {
  Card,
  CardBody,
  CardHeader,
  CardIcon,
  CardTool,
} from "@/components/window/Card"
import { ToolButton } from "@/components/window/ToolButton"
import { Chip } from "@heroui/react"
import { Refresh, SettingConfig } from "@icon-park/react"
import { useEffect, useState } from "react"
import { type AllSystemInfo, allSysInfo } from "tauri-plugin-system-info-api"
export default function Page() {
  return (
    <Card className="h-full">
      <CardHeader>
        <CardIcon type="menu">
          <SettingConfig /> 硬件
        </CardIcon>
        <CardTool>
          {/* <ToolButton>
            <UploadOne />
            云同步
          </ToolButton> */}
          <ToolButton>
            <Refresh /> 刷新
          </ToolButton>
        </CardTool>
      </CardHeader>

      <CardBody>
        <HardwareInfo />
      </CardBody>
    </Card>
  )
}

function HardwareInfo() {
  const [allSysData, setAllSysData] = useState<AllSystemInfo>()
  // const [memInfo, setMemInfo] = useState("")
  // const [staticData, setStaticData] = useState("")
  // const [cpuData, setCpuData] = useState("")
  // const [batteryData, setBatteryData] = useState("")

  useEffect(() => {
    const fetchData = async () => {
      const sys = await allSysInfo()
      console.log(sys)
      setAllSysData(sys)
      // console.log(await memoryInfo())
      // console.log(await staticInfo())
      // console.log(await cpuInfo())
      // console.log(await batteries())
    }

    void fetchData()
  }, [])

  return (
    <div className="flex flex-col gap-1.5">
      <Chip>CPU型号： {allSysData?.cpus[0]?.brand}</Chip>
      <Chip>线程数： {allSysData?.cpu_count}</Chip>
      <Chip>
        系统： {allSysData?.name} {allSysData?.os_version}
      </Chip>
      <Chip>
        内存：
        {allSysData?.total_memory &&
          `${(allSysData.total_memory / 1024 / 1024 / 1024).toFixed(0)}GB`}
      </Chip>
    </div>
  )
}