import { Refresh, User } from "@icon-park/react"
import { Card, CardBody, CardHeader, CardIcon, CardTool } from "../window/Card"
import { addToast, Button, Chip } from "@heroui/react"
import { useSteamStore } from "@/store/steam"
import { ToolButton } from "../window/ToolButton"
import { useAutoAnimate } from "@formkit/auto-animate/react"

const SteamUsers = ({ className }: { className?: string }) => {
  const steam = useSteamStore()
  const [parent /* , enableAnimations */] = useAutoAnimate(/* optional config */)

  const getUsers = async (toast?: boolean) => {
    if (!steam.state.steamDirValid) {
      if (toast) addToast({ title: "Steam路径不可用", color: "warning" })
      return
    }
    await steam.getUsers()

    if (toast) addToast({ title: `已获取Steam用户` })
  }

  return (
    <Card /* className={cn("max-w-96", className)} */>
      <CardHeader>
        <CardIcon>
          <User /> Steam用户
        </CardIcon>
        <CardTool>
          <ToolButton onClick={() => getUsers(true)}>
            <Refresh />
            刷新
          </ToolButton>
        </CardTool>
      </CardHeader>
      <CardBody>
        <ul className="flex flex-col gap-3 mt-1" ref={parent}>
          {steam.state.users.map((user, id) => (
            <li
              key={user.account_name}
              className="flex gap-2 transition rounded-lg bg-zinc-50 dark:bg-zinc-900"
            >
              <img
                src={user.avatar ? `data:image/png;base64,${user.avatar}` : "/logo_square.png"}
                alt="avatar"
                className="w-20 h-20 rounded-l-lg"
                draggable="false"
              />
              <div className="flex flex-col flex-grow justify-center gap-2 p-0.5">
                <h3 className="text-xl font-semibold">{user.persona_name}</h3>
                <div className="flex gap-2">
                  <Chip size="sm" className="bg-zinc-200 dark:bg-zinc-800">
                    {user.account_name}
                  </Chip>
                  <Chip size="sm" className="bg-zinc-200 dark:bg-zinc-800">
                    {user.steam_id32}
                  </Chip>
                  <Chip size="sm" className="bg-zinc-200 dark:bg-zinc-800">
                    {user.steam_id64.toString()}
                  </Chip>
                  {user.recent > 0 && (
                    <Chip size="sm" color="primary">
                      最近登录
                    </Chip>
                  )}
                </div>
              </div>
              <div className="flex items-end gap-2 p-2">
                <Button size="sm" onPress={() => steam.switchLoginUser(id)}>
                  切换登录
                </Button>
                <Button size="sm" onPress={() => steam.selectUser(id)}>
                  选择
                </Button>
              </div>
            </li>
          ))}
        </ul>
      </CardBody>
    </Card>
  )
}

export default SteamUsers
