import { Tooltip } from 'antd'
import { useState } from 'react'
import './color-select.less';
import { HexStringToKeywords } from '../../utils/color-palette';
import DragModal from '../drag-modal/DragModal';
import ColorPalette from './color-palette';
import React from 'react';

export interface IProps {
    visible: boolean;                         //组件是否可见
    onSelectChanged?: (color:string)=>void;   //选择颜色时的回调函数
    onClose?: ()=>void;                       //关闭组件时的回调函数
}

const colorList = [
    '#000000', '#f8d731', '#cd6928', '#991b1e', '#642165', '#293189', '#22346e', '#136734', '#727430', 
    '#636466', '#f1eb1f', '#f26722', '#cd2027', '#93278f', '#4554a5', '#105689', '#139b48', '#999b37',
    '#939598', '#f4ee51', '#f8991e', '#ed1f24', '#a953a0', '#5e67af', '#2776bb', '#58ba48', '#c8c92d',
    '#c7c8ca', '#f7f281', '#fecc66', '#f27172', '#d19cc7', '#9898cc', '#7aafdf', '#afd9aa', '#e5e878',
    '#ffffff', '#f8f6b0', '#feeab9', '#f7abae', '#ddb3d4', '#cecce6', '#adddf7', '#d7ebd2', '#edee99',
]
const indexColorList = [
    '#ff0000',
    '#ffff00',
    '#00ff00',
    '#00ffff',
    '#0000ff',
    '#ff00ff',
    '#ffffff',
    '#808080',
    '#c0c0c0',
]

export default function ColorSelect(props: IProps){
    const [colorPaletteOpen, setColorPaletteOpen] = useState<boolean>(false);
    const content = (
        <div className="color-select-dropdown">
            <div className="tn-color-select">
                <div className="color-wrapper">
                    {colorList.map((color, idx) => (
                        <Tooltip title={color} key={idx} color="#fff" overlayClassName="color-tooltip">
                            <div className="color-item" onClick={() => {props.onSelectChanged(color)}}>
                                <div className="color-box" style={{backgroundColor: color}}></div>
                            </div>
                        </Tooltip>
                    ))}
                </div>
            </div>
            <div className="color-select">
                <div>索引颜色</div>
                <div className="color-wrapper">
                    {indexColorList.map((color, idx) => (
                        <Tooltip title={HexStringToKeywords[color] || color} key={idx} color="#fff" overlayClassName="color-tooltip">
                            <div className="color-item" onClick={() => {props.onSelectChanged(color)}}>
                                <div className="color-box" style={{backgroundColor: color}}></div>
                            </div>
                        </Tooltip>
                    ))}
                </div>
            </div>
            <div>
                <div className="click-select" style={{marginTop: '4px'}} onClick={() => {
                    setColorPaletteOpen(true);
                }}>
                    <span>更多颜色...</span>
                </div>
            </div>
        </div>
    )

    return (
        <div className="color-select">
            <DragModal
                title="选择颜色"
                visible={props.visible}
                width={220}
                onClose={props.onClose}
            >
                {content}
            </DragModal>

            <DragModal 
                title="选择颜色"
                visible={colorPaletteOpen}
                width={550}
                wrapClassName="color-select-modal"
                onClose={() => {setColorPaletteOpen(false)}}>
                    <div className="color-select-modal-body">
                        <ColorPalette 
                            onCancel={() => {setColorPaletteOpen(false)}}
                            onComplete={(color:string) => {setColorPaletteOpen(false);props.onSelectChanged(color)}}></ColorPalette>
                    </div>

            </DragModal>
        </div>
    )
}