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, id: number }[]
    onChange?: (value?: { text: string, id: number }[]) => void
    putInType?: 'NOVEL' | 'GAME'
}

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

    /****************************************/
    const [barrageList, setBarrageList] = useState<{ text: string, id: number }[]>([])

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

    useEffect(() => {
        getBarrageRecommendList.run({ taskType: putInType }).then(res => {
            if (res?.list?.length) {
                setBarrageList(res?.list || [])
            } else {
                setBarrageList([])
            }
        })
    }, [putInType])

    let barrageValue = value?.map(item => item.id)
    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={(_, options) => {
                onChange?.(options?.length > 0 ? options.map((item: { text: any; value: any }) => ({ text: item.text, id: item.value })) : [])
            }}
            value={barrageValue}
            mode="multiple"
            filterOption={(input, option) =>
                ((option?.label ?? '') as any).toLowerCase().includes(input.toLowerCase())
            }
            allowClear
            loading={getBarrageRecommendList.loading}
            bordered={false}
        >
            {barrageList.map((item: { text: string, id: number }) => <Select.Option key={item.id} value={item.id} text={item.text} disabled={barrageValue?.length > arrayProperty.maxNumber && !barrageValue.includes(item.id)}>{item.text}</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)