import React, { useEffect, useState } from 'react';
import style from './index.less'
import { Button, Popover } from 'antd';
import { PlusOutlined, PlusCircleOutlined, CloseOutlined, EditOutlined } from '@ant-design/icons';
import useNewToken from '@/Hook/useNewToken';
import SelectFilterUser from './selectFilterUser';
import NewFilterUser from './newFiterUser';
import dayjs from 'dayjs';
import FilterUserTooltip from './filterUserTooltip';
import weComTaskStore from '@/pages/weComTask/store'
import { toJS } from 'mobx';

interface FilterUserProps {
    configType: BUSINES_SPLAN_API.ConfigTypeProps
    value?: { [key: string]: any }
    onChange?: (value: any) => void
    isSHow?: boolean
}

/**
 * 赛选用户
 * @param param0 
 * @returns 
 */
const FilterUser: React.FC<FilterUserProps> = ({ configType = 'USER_GROUP', value, onChange, isSHow }) => {

    /****************************************/
    const { bookPlatForm } = toJS(weComTaskStore.data)
    const { token } = useNewToken()

    const [filterUserVisible, setFilterUserVisible] = useState<boolean>(false)
    const [addVisible, setAddVisible] = useState<boolean>(false)
    const [modifyDta, setModifyDta] = useState<any>()
    /****************************************/

    const bookCityList = bookPlatForm?.map(item => ({ label: item.platformName, value: item.platformKey }))

    return <div className={style.filterUser}>
        <div className={style.filterUser_box} style={isSHow ? { position: 'relative', zIndex: 5 } : {}}>
            <div style={{ fontWeight: 'bold' }}>{configType === 'GROUP_GROUP' ? '群人群包' : '人群包'}：</div>
            {(value && Object.keys(value)?.length > 0) && <Popover
                placement="right"
                styles={{ body: { maxWidth: 350, maxHeight: 350, overflow: 'hidden', overflowY: 'auto' } }}
                mouseEnterDelay={0.5}
                content={<FilterUserTooltip
                    bookCityList={bookCityList}
                    configName={value?.configName}
                    data={value?.configContent}
                    configType={configType}
                />}
            >
                <div className={style.filterUser_content}>
                    <div className={style.filterUser_title}>{value?.configName}</div>
                    <div className={style.filterUser_title_leftbtn} style={{ display: isSHow ? 'none' : 'block' }}>
                        <Button
                            type='link'
                            icon={<EditOutlined />}
                            style={{ padding: 0 }}
                            size="small"
                            onClick={() => {
                                const { configName, configContent } = value
                                const { condLastRechargeTimeMin, condLastRechargeTimeMax, condBeginTime, condEndTime, ...content } = configContent
                                let newModifyDta = {
                                    ...content,
                                    configName,
                                }
                                if (condLastRechargeTimeMin && condLastRechargeTimeMax) {
                                    newModifyDta['lastRechargeTime'] = [dayjs(condLastRechargeTimeMin), dayjs(condLastRechargeTimeMax)]
                                }
                                if (condBeginTime) {
                                    newModifyDta['condBeginTime'] = dayjs(condBeginTime)
                                }
                                if (condEndTime) {
                                    newModifyDta['condEndTime'] = dayjs(condEndTime)
                                }
                                setModifyDta(newModifyDta)
                                setAddVisible(true)
                            }}
                        ></Button>
                        <Button type='link' icon={<CloseOutlined />} style={{ padding: 0 }} size="small" onClick={() => { onChange?.(undefined) }}></Button>
                    </div>
                </div>
            </Popover>}
            <div>
                {!(value && Object.keys(value)?.length > 0) && <Button
                    icon={<PlusOutlined />}
                    style={{ padding: 0, color: token.colorPrimary }}
                    type="link"
                    size="small"
                    onClick={() => {
                        setAddVisible(true)
                    }}
                >新增</Button>}
                {!isSHow && <Button
                    icon={<PlusCircleOutlined />}
                    style={{ padding: 0, color: token.colorPrimary, marginLeft: 10 }}
                    type='link'
                    size="small"
                    onClick={() => {
                        setFilterUserVisible(true)
                    }}
                >选择</Button>}
            </div>
        </div>

        {/* 选择人群包 */}
        {filterUserVisible && <SelectFilterUser
            bookCityList={bookCityList}
            visible={filterUserVisible}
            configType={configType}
            onClose={() => { setFilterUserVisible(false) }}
            onChange={({ configName, configContent, id }) => {
                onChange?.({ configName, configContent, id })
                setFilterUserVisible(false)
            }}
        />}

        {/* 新增人群包 */}
        {addVisible && <NewFilterUser
            bookCityList={bookCityList}
            configType={configType}
            value={modifyDta}
            visible={addVisible}
            isBackVal={true}
            onClose={() => { setAddVisible(false); setModifyDta(undefined) }}
            onChange={(value) => {
                onChange?.(value)
                setAddVisible(false)
                setModifyDta(undefined)
            }}
        />}
    </div>
};

export default FilterUser;