"use client"

import { currentUser, setCsDir, setDir, steamStore } from "@/store/steam"
import { useEffect, useState } from "react"
import { useSnapshot } from "valtio"
export default function Page() {
  void steamStore.start()
  const steam = useSnapshot(steamStore.state)
  const [steamDir, setSteamDir] = useState(steam.dir)
  const [cs2Dir, setCs2Dir] = useState(steam.csDir)

  useEffect(() => {
    setSteamDir(steam.dir)
    setCs2Dir(steam.csDir)
  }, [steam.dir, steam.csDir])

  return (
    <div
      className="flex flex-col items-center justify-center w-full h-screen gap-6"
      data-tauri-drag-region
    >
      <h1 className="text-4xl font-bold tracking-wide">CS工具箱</h1>
      <p>准备环节</p>

      <div className="flex flex-col w-full gap-2 p-5 border rounded-lg bg-white/40">
        <p>Steam所在文件夹</p>
        <input
          className="px-2 py-1 mb-2 rounded-lg"
          value={steamDir}
          onChange={(e) => {
            setSteamDir(e.target.value)
            setDir(e.target.value)
          }}
        />
        <p>CS2所在文件夹</p>
        <input
          className="px-2 py-1 mb-2 rounded-lg"
          value={cs2Dir}
          onChange={(e) => {
            setCs2Dir(e.target.value)
            setCsDir(e.target.value)
          }}
        />
        <p>当前用户64位SteamID：{currentUser().steamID64}</p>
      </div>
    </div>
  )
}