import { Alert, Checkbox, Input, Spin, Tabs } from 'antd';
import React, { useEffect, useState } from 'react';
import './global.less';
import { businessPlanData } from '../../page/businessPlan/create/const';
import { CheckCircleOutlined } from '@ant-design/icons';
import useNewToken from '@/Hook/useNewToken';
import weComTaskStore from '@/pages/weComTask/store'
import { toJS } from 'mobx';

interface Props {
    isSetTag?: boolean
    value?: { [x: string]: any }
    onChange?: (value: { [x: string]: any }) => void
    id?: any
    disabled?: boolean
}

/**
 * 选择智能标签
 * @param param0 
 * @returns 
 */
const MindTags: React.FC<Props> = ({ value, onChange, id, isSetTag, disabled }) => {

    /*****************************************/
    const { bookPlatForm, bookList } = toJS(weComTaskStore.data)
    const { token } = useNewToken()
    const [mindTagValue, setMindTagValue] = useState<{ [x: string]: any }>(value || {})
    const [books, setBooks] = useState<{ id: number, bookName: string, platformId: number }[]>(bookList || [])
    const [oldBooks] = useState<{ id: number, bookName: string, platformId: number }[]>(bookList || [])
    const [book, setBook] = useState<string>()

    // const getBookPlatInfoAll = useAjax(() => getBookPlatInfoAllApi()) //书城
    // const getAllBook = useAjax(() => getAllBookApi()) //书
    /*****************************************/

    // useEffect(() => {
    //     getBookPlatInfoAll.run()
    //     getAllBook.run().then(res => {
    //         console.log(res);
    //         if (res?.data) {
    //             setOldBooks(res.data)
    //             setBooks(res.data)
    //         }
    //     })
    // }, [])

    useEffect(() => {
        if (value && JSON.stringify(value) !== JSON.stringify(mindTagValue)) {
            setMindTagValue(value || {})
        }
    }, [value, mindTagValue])

    useEffect(() => {
        if (mindTagValue?.bookCity) {
            const newBooks = oldBooks.filter(item => item.platformId === mindTagValue.bookCity)
            setBooks(newBooks)
        } else {
            setBooks(oldBooks)
        }
    }, [mindTagValue?.bookCity])

    return <div id={id}>
        {/* <Spin spinning={getBookPlatInfoAll.loading || getAllBook.loading}> */}
        <Spin spinning={false}>
            <Tabs
                defaultActiveKey="1"
                tabPosition='left'
                className='mindTags'
                items={[
                    {
                        label: <>业务（来源渠道）<CheckCircleOutlined style={{ color: token.colorPrimary, visibility: mindTagValue?.business ? 'visible' : 'hidden' }} /></>,
                        key: 'business',
                        children: <div className='mindTags_content'>
                            {isSetTag && <div className='mindTags_content_search'>
                                <Alert message="勾选默认打上模板选择的业务类型" type="warning" />
                            </div>}
                            <div className='mindTags_content_scroll'>
                                {businessPlanData.map(item => <div key={item.value} style={{ padding: '5px 0' }}>
                                    <Checkbox onChange={(e) => {
                                        const newValue = { ...mindTagValue, business: item.value }
                                        if (!e.target.checked) {
                                            delete newValue['business']
                                        }
                                        const data = Object.keys(newValue).length === 0 ? undefined : newValue
                                        setMindTagValue(data)
                                        onChange?.(data)
                                    }} checked={item.value === mindTagValue?.['business']} disabled={disabled}>{item.label}</Checkbox>
                                </div>)}
                            </div>
                        </div>
                    },
                    {
                        label: <>书城（来源渠道）<CheckCircleOutlined style={{ color: token.colorPrimary, visibility: mindTagValue?.bookCity ? 'visible' : 'hidden' }} /></>,
                        key: 'bookCity',
                        children: <div className='mindTags_content'>
                            {isSetTag && <div className='mindTags_content_search'>
                                <Alert message="勾选默认打上模板选择的书城类型" type="warning" />
                            </div>}
                            <div className='mindTags_content_scroll'>
                                {bookPlatForm?.map(item => <div key={item.id} style={{ padding: '5px 0' }}>
                                    <Checkbox onChange={(e) => {
                                        const newValue = { ...mindTagValue, bookCity: item.id, product: e.target.checked ? undefined : mindTagValue?.product }
                                        if (!e.target.checked) {
                                            delete newValue['bookCity']
                                            if (!mindTagValue?.product) {
                                                delete newValue['product']
                                            }
                                        } else {
                                            delete newValue['product']
                                        }
                                        const data = Object.keys(newValue).length === 0 ? undefined : newValue
                                        setMindTagValue(data)
                                        onChange?.(data)
                                    }} checked={item.id === mindTagValue?.['bookCity']} disabled={disabled}>{item.platformName}</Checkbox>
                                </div>)}
                            </div>
                        </div>
                    },
                    {
                        label: <>产品（来源渠道）<CheckCircleOutlined style={{ color: token.colorPrimary, visibility: mindTagValue?.product ? 'visible' : 'hidden' }} /></>,
                        key: 'product',
                        children: <div className='mindTags_content'>
                            <div className='mindTags_content_search'>
                                {isSetTag && <Alert message="勾选默认打上模板选择的产品类型" type="warning" style={{ marginBottom: 10 }} />}
                                <Input
                                    placeholder='输入书名'
                                    allowClear
                                    value={book}
                                    onChange={(e) => {
                                        setBook(e.target.value)
                                    }}
                                />
                            </div>
                            <div className='mindTags_content_scroll'>
                                {books.filter(item => book ? item.bookName.includes(book) : true).map(item => <div key={item.id} style={{ padding: '5px 0' }}>
                                    <Checkbox onChange={(e) => {
                                        const newValue = { ...mindTagValue, product: e.target.checked ? item.id : undefined }
                                        if (!e.target.checked) {
                                            delete newValue['product']
                                        }
                                        const data = Object.keys(newValue).length === 0 ? undefined : newValue
                                        setMindTagValue(data)
                                        onChange?.(data)
                                    }} checked={item.id === mindTagValue?.['product']} disabled={disabled}>{item.bookName}</Checkbox>
                                </div>)}
                            </div>
                        </div>
                    }
                ]}
            />
        </Spin>
    </div>
};

export default React.memo(MindTags);