import { useAjax } from "@/Hook/useAjax"
import { getBarrageRecommendListApi } from "@/services/adqV3/global"
import { Select } from "antd"
import React, { useEffect, useState } from "react"

interface Props {
    arrayProperty: { maxNumber: number, minNumber: number }
    value?: { text: string }[]
    onChange?: (value?: { text: string }[]) => void
    putInType?: 'NOVEL' | 'GAME'
}

/**
 * 选择弹幕
 * @param param0 
 * @returns 
 */
const SelectBarrage: React.FC<Props> = ({ arrayProperty, value = [], onChange, putInType }) => {

    /****************************************/
    const [barrageList, setBarrageList] = useState<string[]>([])

    const getBarrageRecommendList = useAjax((params) => getBarrageRecommendListApi(params))
    /****************************************/

    useEffect(() => {
        getBarrageRecommendList.run({ taskType: putInType }).then(res => {
            if (res?.list?.length) {
                const setBarrage = new Set(res?.list.map((item: { text: string }) => item.text))
                const arrayBarrage = [...setBarrage]
                setBarrageList(arrayBarrage as string[])
            } else {
                setBarrageList([])
            }
        })
    }, [putInType])

    let barrageValue = value?.map(item => item.text)
    return <div
        style={{
            border: '1px solid #d9d9d9',
            borderRadius: 6,
            display: 'flex',
            gap: 10,
            borderColor: barrageValue?.length > arrayProperty.maxNumber ? 'red' : '#d9d9d9',
            alignItems: 'center'
        }}
    >
        <Select
            showSearch
            placeholder="请选择弹幕"
            onChange={(e) => {
                onChange?.(e?.length > 0 ? e.map(item => ({ text: item })) : [])
            }}
            value={barrageValue}
            mode="multiple"
            filterOption={(input, option) =>
                ((option?.label ?? '') as any).toLowerCase().includes(input.toLowerCase())
            }
            loading={getBarrageRecommendList.loading}
            bordered={false}
        >
            {barrageList.map((item: string, index: number) => <Select.Option key={index} value={item} disabled={barrageValue?.length > arrayProperty.maxNumber && !barrageValue.includes(item)}>{item}</Select.Option>)}
        </Select>
        <div
            style={{
                // borderLeft: '1px solid #d9d9d9',
                display: 'flex',
                alignContent: 'center',
                justifyContent: 'center',
                paddingLeft: 10,
                paddingRight: 10
            }}
        >
            <span>{value?.length || 0}/{arrayProperty.maxNumber}</span>
        </div>
    </div>
}

export default React.memo(SelectBarrage)