"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 { version } from "@tauri-apps/plugin-os"
import { useEffect, useState } from "react"
import { type AllSystemInfo, allSysInfo } from "tauri-plugin-system-info-api"

export default function Page() {
  return (
    <section className="flex flex-col gap-4 overflow-hidden rounded-lg">
      <div className="flex flex-col h-full gap-4 overflow-hidden hide-scrollbar">
        <Card className="overflow-hidden">
          <CardHeader>
            <CardIcon type="menu">
              <SettingConfig /> 硬件
            </CardIcon>
            <CardTool>
              {/* <ToolButton>
                <UploadOne />
                云同步
              </ToolButton> */}
              <ToolButton>
                <Refresh /> 刷新
              </ToolButton>
            </CardTool>
          </CardHeader>

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

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>
  )
}