import React, { useState, useContext } from 'react';
import styled from 'styled-components';
import { ChromePicker as ColorPicker } from 'react-color';
import { ThemeContext } from './ThemeProvider';
import DefaultTheme from '@/styles/theme';
import Utils from 'utils';
import Button from 'components/button';

const ChromePicker = styled(ColorPicker)`
    display: inline-block;
`;

const Wrap = styled.div`
    display: inline-flex;
`;
const Item = styled.div`
    margin-right: 25px;
    margin-bottom: 15px;
`;
const Label = styled.h1`
    text-align: center;
`;
const ButtonPad = styled.div`
    button {
        margin-right: 10px;
        margin-bottom: 10px;
    }
`;

export default () => {
    const [current, setCurrent] = useState('brand');
    const [theme, setTheme] = useContext(ThemeContext);
    return (
        <ButtonPad>
            <Button color="brand" onClick={() => setCurrent('brand')}>
                brand
            </Button>
            <Button color="select" onClick={() => setCurrent('select')}>
                select
            </Button>
            <Button color="warning" onClick={() => setCurrent('warning')}>
                warning
            </Button>
            <Button color="encourage" onClick={() => setCurrent('encourage')}>
                encourage
            </Button>
            <Button color="assist" onClick={() => setCurrent('assist')}>
                assist
            </Button>
            <Button color="money" onClick={() => setCurrent('money')}>
                money
            </Button>
            <Button appearance="stroke" onClick={() => setTheme({ ...DefaultTheme })}>
                重置
            </Button>
            <Button appearance="stroke" onClick={() => Utils.downloadObjectAsJson(theme, 'theme')}>
                下载当前主题
            </Button>

            <Wrap>
                <Item>
                    <ChromePicker
                        color={(theme as any)[current]}
                        onChangeComplete={color => {
                            setTheme({ ...theme, ...{ [current]: color.hex } });
                        }}
                    />
                    <Label>Normal</Label>
                </Item>
                <Item>
                    <ChromePicker
                        color={(theme as any)[current + 'Hover']}
                        onChangeComplete={color => {
                            setTheme({ ...theme, ...{ [current + 'Hover']: color.hex } });
                        }}
                    />
                    <Label>Hover</Label>
                </Item>
                <Item>
                    <ChromePicker
                        color={(theme as any)[current + 'Active']}
                        onChangeComplete={color => {
                            setTheme({ ...theme, ...{ [current + 'Active']: color.hex } });
                        }}
                    />
                    <Label>Click</Label>
                </Item>
            </Wrap>
        </ButtonPad>
    );
};