/** @format */

import * as React from 'react';
import {Button, Drawer, Row, Col} from 'antd';
import message from '../message';
import {INIT_THEMECOLORS} from '../../const/status';
import {getLocalStorage, setLocalStorage} from '../../utils/webStorage';
import ColorPickerItem from './colorPickerItem';
let initialColor = INIT_THEMECOLORS;
type colorKeys = keyof typeof INIT_THEMECOLORS;

const colorPicker: React.FC = props => {
    const [state, setState] = React.useState(() => {
        const [error, localTheme] = getLocalStorage('app-theme');
        return {
            colors: {...initialColor, ...localTheme},
            displayColorPicker: false,
            showChooseColorPicker: '',
        };
    });
    const timerRef: any = React.useRef({timer: null});
    const onChange = (colors: any) => {
        let stateColors = {};
        setState(preState => {
            stateColors = {...preState.colors, ...colors};
            return {...preState, colors: {...preState.colors, ...colors}};
        });

        if (timerRef && timerRef.current && timerRef.current.timer) {
            clearTimeout(timerRef.current.timer);
        }
        timerRef.current.timer = setTimeout(() => {
            setLocalStorage('app-theme', stateColors);
            window.less
                .modifyVars(stateColors)
                .then(() => {
                    console.log('主题切换成功');
                })
                .catch((error: Error) => {
                    console.log(error);
                    message.error(`主题切换失败`);
                });
        }, 300);
    };
    const handleUpdateVisible = () => {
        setState(preState => {
            const visible = !preState.displayColorPicker;
            return {
                ...preState,
                displayColorPicker: visible,
                showChooseColorPicker: visible ? preState.showChooseColorPicker : '',
            };
        });
    };
    return (
        <>
            {React.isValidElement(props.children) &&
                React.cloneElement(props.children, {
                    onClick: handleUpdateVisible,
                })}

            <Drawer
                onClose={handleUpdateVisible}
                width={400}
                title='主题切换'
                placement='right'
                closable
                visible={state.displayColorPicker}
                className='color-picker-wrapper'
            >
                <div
                    onClick={() => {
                        setState(preState => ({...preState, showChooseColorPicker: ''}));
                    }}
                >
                    {Object.keys(initialColor).map(element => {
                        return (
                            <Row key={element} style={{marginBottom: 24}}>
                                <ColorPickerItem
                                    visible={state.showChooseColorPicker === element}
                                    handleUpdateVisible={() => {
                                        setState(preState => ({...preState, showChooseColorPicker: element}));
                                    }}
                                    onChange={(color: string) => {
                                        onChange({
                                            [element]: color,
                                        });
                                    }}
                                    name={element as colorKeys}
                                    color={state.colors[element as colorKeys]}
                                />
                            </Row>
                        );
                    })}
                    <Button
                        onClick={() => {
                            onChange(initialColor);
                        }}
                    >
                        重置样式
                    </Button>
                </div>
            </Drawer>
        </>
    );
};
export default colorPicker;
