import { Tag } from "antd"
import { SpaceSize } from "antd/lib/space"
import React from "react"
import { CSSProperties } from "react"
import './index.less'

export interface TagParam {
    color?: string             //标签字体颜色
    backgroundColor?: string   //标签背景颜色
    name: string               //标签名字
    tag: number                //标签识别码
}
interface MultiTagSelectProps {
    tags?: number[] | number,   //当前选中的标签的识别码
    params?: TagParam[],        //所有标签
    paramGroups?: TagParam[][],
    showChecked?: boolean       //只展示选中的
    spaceSize?: SpaceSize       //选项间隙
    single?: boolean            // 设置单选模式
    themeColor?: string         //主题颜色
    lock?: boolean              //是否锁定
    onChange?: (value: number[] | number) => void // 单选模式下返回单个值
    style?: CSSProperties
}

const MultiTagSelect = (props: MultiTagSelectProps) => {

    const onTagChange = (checked: boolean, tag: number) => {
        if (props.lock) return;
        if (props.single) {
            if (props.onChange) props.onChange(tag);
            return;
        }
        let tags = props.tags as number[];
        let data = tags.filter(t => t !== tag) || [];
        if (checked) data.push(tag);
        if (props.onChange) props.onChange(data);
    }

    //用于在标签过长的时候可使用鼠标滑轮滑动
    const onMouseOver = () => {
        let tags = document.querySelector('.tn-multi-tag-select-container');
        tags.addEventListener('wheel', (event:WheelEvent) => {
            event.preventDefault();
            tags.scrollLeft += event.deltaY;
        })
    }

    return (
        <div className="tn-multi-tag-select-container" onMouseOver={onMouseOver} style={props.style || null}>
            {props.params && (
                <div className="tag-group" style={{ gap: props.spaceSize != null ? props.spaceSize : 10 }}>
                    {props.params.map((param, idx) => {
                        let tagChecked;
                        if (typeof props.tags === 'number') {
                            tagChecked = props.tags as number === param.tag;
                        } else {
                            tagChecked = props.tags?.indexOf(param.tag) > -1;
                        }
                        if (props.showChecked && !tagChecked) return null;
                        let color = param.color ? param.color : (param.backgroundColor?.indexOf('#') > -1 ? 'white' : null);
                        if (tagChecked) return (
                            <Tag
                                key={idx}
                                className="multi-tag multi-tag-checked"
                                onClick={() => onTagChange(false, param.tag)}
                                style={{ 'color': color }}
                                color={param.backgroundColor ? param.backgroundColor : (props.themeColor || '#108ee9')}
                            >{param.name}</Tag>
                        )

                        return (
                            <Tag className="multi-tag" key={idx} onClick={() => onTagChange(true, param.tag)}>{param.name}</Tag>
                        )
                    })}
                </div>
            )}
            {props.paramGroups && (
                <div>
                    {props.paramGroups.map((params, idx) => (
                        <div className="tag-group multi" key={idx} style={{ gap: props.spaceSize != null ? props.spaceSize : 10 }}>
                            {params.map((param, idx) => {
                                let tagChecked;
                                if (typeof props.tags === 'number') {
                                    tagChecked = props.tags as number === param.tag;
                                } else {
                                    tagChecked = props.tags?.indexOf(param.tag) > -1;
                                }
                                if (props.showChecked && !tagChecked) return null;
                                let color = param.color ? param.color : (param.backgroundColor?.indexOf('#') > -1 ? 'white' : null);
                                if (tagChecked) return (
                                    <Tag
                                        key={idx}
                                        className="multi-tag multi-tag-checked"
                                        onClick={() => onTagChange(false, param.tag)}
                                        style={{ 'color': color }}
                                        color={param.backgroundColor ? param.backgroundColor : (props.themeColor || '#108ee9')}
                                    >{param.name}</Tag>
                                )

                                return (
                                    <Tag className="multi-tag" key={idx} onClick={() => onTagChange(true, param.tag)}>{param.name}</Tag>
                                )
                            })}
                        </div>
                    ))}
                </div>
            )}
        </div>
    )

}

MultiTagSelect.defaultProps = {
    tags: [],
    params: [],
    single: false,
}

export default MultiTagSelect;