import { Col, Row } from "antd"
import React, { useEffect, useState } from "react"
import './index.less'
import { CYProps } from "./config"

interface Props {
    data: CYProps[],
    value?: string[]
    onChange?: (value: any) => void
}

const SelectCol: React.FC<Props> = ({ value = [], onChange, data = [] }) => {

    /**********************/
    const [key, setKey] = useState<string[]>([])
    /**********************/

    useEffect(() => {
        setKey(value)
    }, [value])

    const selectHandle = (value: string) => {
        let newKey: string[] = JSON.parse(JSON.stringify(key))
        if (newKey?.includes(value)) { // 去除
            newKey = newKey.filter(item => item !== value)
        } else { // 增加
            newKey = [...newKey, value]
        }
        setKey(newKey)
        onChange?.(newKey)
    }

    return <Row gutter={10} className="selectRow">
        {data.map((item, index) => <Col span={Math.floor(24 / data.length)} key={item.value + '_' + index}>
            <div className={`selectCol ${key.includes(item.value) ? 'selected' : ''}`} onClick={() => selectHandle(item.value)}>
                {item.icon}
                <span>{item.label}</span>
            </div>
        </Col>)}
    </Row>
}

export default React.memo(SelectCol)