"use client";

import { faArrowUp, faArrowUp91, faArrowUpAZ, faArrowUpShortWide, faChessKnight, faMoon, faSun, faUpLong } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useAtom } from "jotai";
import { useEffect, useState } from "react";
import { themeAtom } from "../_lib/atom";
import { Tooltip } from "antd";


export default function CustomAffix() {
    const [show, setShow] = useState(false);
    const [theme, setTheme] = useAtom(themeAtom)
    const handleScroll = () => {
        const distance = {
            x: document.documentElement.scrollLeft || document.body.scrollLeft,
            y: document.documentElement.scrollTop || document.body.scrollTop
        };
        console.log(distance);
        if (distance.y > 600) {
            setShow(true);
        } else {
            setShow(false)
        }
    };

    useEffect(() => {
        window.addEventListener('scroll', handleScroll);
        return () => {
            window.removeEventListener('scroll', handleScroll);
        };
    }, []);
    return (
        <div className="fixed  z-10 bottom-10 right-10 flex flex-col gap-y-2 p-2 rounded-xl ">
            {
                show &&
                <div
                    onClick={() => {
                        window.scrollTo({ top: 0, behavior: "smooth" });
                    }}
                    className="w-[40px] h-[40px]  group  bg-[#000]/20 backdrop-blur-md  cursor-pointer hover:scale-105 duration-150  rounded-full flex justify-center items-center">
                    <FontAwesomeIcon icon={faArrowUp} className="text-[#666] group-hover:text-[#333]"></FontAwesomeIcon>
                </div>

            }
            <Tooltip title={theme === 'light' ? "深色模式" : "浅色模式"} placement="left">
                <div
                    onClick={() => {
                        if (theme === "dark") {
                            setTheme("light")
                        } else {
                            setTheme("dark")

                        }
                    }}
                    className="w-[40px] h-[40px]  group  bg-[#000]/20 backdrop-blur-md  cursor-pointer hover:scale-105 duration-150  rounded-full flex justify-center items-center">
                    <FontAwesomeIcon icon={theme === 'dark' ? faSun : faMoon} className="text-[#666] group-hover:text-[#333]"></FontAwesomeIcon>
                </div>
            </Tooltip>

        </div>
    )
}