'use client';
import { Button } from 'antd';
import { type FC, useContext, useEffect, useRef, useState } from 'react';

import { LoacalContext, locales } from './context/constants';
import $styles from './style.module.css';

const StateDemo2: FC = () => {
    const { local, setLocal } = useContext(LoacalContext);
    const [ghost, setGhost] = useState<boolean>(false);
    const [width, setWidth] = useState(0);
    const toggleGhostBtn = () => setGhost(!ghost);
    const resizeHandle = () => setWidth(window.innerWidth);
    const booleans = useRef(true);
    const changeLocal = () => {
        booleans.current = !booleans.current;
        setLocal(locales[booleans.current ? 1 : 0]);
    };
    useEffect(() => {
        if (typeof window !== 'undefined') {
            setWidth(window.innerWidth);
            window.addEventListener('resize', resizeHandle);
        }
        return () => window.removeEventListener('resize', resizeHandle);
    });
    useEffect(() => {
        console.log('切换幽灵按钮');
    }, [ghost]);
    return (
        <div className={$styles.container}>
            <div>{local.label}</div>
            <button type="button" onClick={changeLocal}>
                local
            </button>
            <h2 className="tw-text-center">useEffect Demo</h2>
            <p className="tw-py-5 tw-text-center">{ghost ? 'ghost' : '普通'}按钮</p>
            <div className="tw-flex tw-flex-col tw-justify-center">
                <Button type="primary" onClick={toggleGhostBtn} ghost={ghost}>
                    切换按钮样式
                </Button>
                <p className="tw-pt-5 tw-text-center">宽度为: {width}</p>
            </div>
        </div>
    );
};
export default StateDemo2;