import { Button, Card, Col, Input, Modal, Row, Select, Space, Tabs, Typography } from "antd"
import React, { useEffect, useState } from "react"
import { getTemplateListApi, GetTemplateListProps, MediaContentProps, MEDIATYPE, MediaTypeProps } from "../../API/weMaterial/weMaterial"
import style from "../../page/weMaterial/index.less"
import useNewToken from "@/Hook/useNewToken"
import { useAjax } from "@/Hook/useAjax"
import Left from "../../page/weMaterial/left"
import SelectTag from "../../page/weMaterial/selectTag"
import Right from "./right"
import { MediaSize } from "../materialMould/uploadButton"

interface Props {
    // 已选素材长度
    scLength: number
    visible?: boolean
    onClose?: () => void
    onChange?: (data?: MediaContentProps[]) => void
    /**类型 传类型  其它不可选*/
    type?: MediaTypeProps
    noShowType?: Array<'text' | 'video' | 'file' | 'link' | 'voice' | 'miniprogram' | 'sck' | 'image'>,//不可使用的素材
    textCount?: number,  // 可选文案数量
    mediaSize?: MediaSize
    dataLength?: number
}
/**
 * 从素材库导入
 * @returns 
 */
const MaterialLibraryMould: React.FC<Props> = ({ visible, onClose, scLength, onChange, type, noShowType, mediaSize, textCount, dataLength = 9 }) => {
    /****************************************/
    const { token } = useNewToken()
    const [queryForm, setQueryForm] = useState<GetTemplateListProps>({ pageNum: 1, pageSize: 20, isPersonal: '0' })
    const [data, setData] = useState<any[]>([])
    const [selectData, setSelectData] = useState<any>({})
    const [xzData, setXzData] = useState<MediaContentProps[]>([])

    const getTemplateList = useAjax((params) => getTemplateListApi(params))
    /****************************************/

    useEffect(() => {
        getList()
    }, [queryForm])

    const getList = () => {
        getTemplateList.run(queryForm).then(res => {
            if (res) {
                if (queryForm.pageNum === 1) {
                    setData(res?.data?.records)
                    if (!(selectData && res?.data?.records?.find((item: any) => item.id == selectData.id))) {
                        setSelectData(res?.data?.records[0])
                    }
                } else {
                    setData(data.concat(res?.data?.records))
                }
            }
        })
    }

    // 下一页
    const loadMoreData = () => {
        setQueryForm({ ...queryForm, pageNum: queryForm.pageNum + 1 })
    }

    const exportData = (type: 'jx' | 'one') => {
        if (xzData.length > 0) {
            onChange?.(xzData)
            setSelectData(data[0])
            if (type === 'one') {
                onClose?.()
            }
        }
    }

    return <Modal
        styles={{ body: { padding: 0 } }}
        title="从素材库导入"
        open={visible}
        width={1000}
        onCancel={() => onClose?.()}
        footer={<div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <Space>
                <Typography.Text>已选择素材：{xzData.length}</Typography.Text>
                <Typography.Text>本次可导入上线：{dataLength - scLength}</Typography.Text>
            </Space>
            <Space>
                <Button onClick={() => onClose?.()}>取消</Button>
                <Button onClick={() => exportData('jx')}>导入并继续</Button>
                <Button type="primary" onClick={() => exportData('one')}>导入</Button>
            </Space>
        </div>}
    >
        <Card
            title={<Tabs
                activeKey={queryForm.isPersonal}
                items={[{
                    key: '0',
                    label: `公共素材库`,
                }, {
                    key: '1',
                    label: `个人素材库`,
                }]}
                onChange={(e) => { setQueryForm({ ...queryForm, isPersonal: e as any, pageNum: 1, pageSize: 20 }) }}
            />}
            style={{ border: 0 }}
            styles={{body: { padding: 0, height: 500, overflow: 'hidden' }}}
        >
            <Row className={style.weMaterial}>
                <Col flex='auto' className={style.weMaterial_left} style={{ height: '100%', width: 'calc(100% - 350px)' }}>
                    <Card style={{ background: token.colortRansparency, borderRadius: 0, borderTop: 0, borderRight: 0, borderLeft: 0 }}>
                        <Space>
                            <Input.Search placeholder="请输入关键字" allowClear onSearch={(e) => { setQueryForm({ ...queryForm, mediaTitle: e, pageNum: 1, pageSize: 20 }); }} />
                            <Select placeholder='请选择类型' allowClear style={{ width: 80 }} value={queryForm?.mediaType} onChange={(e) => { setQueryForm({ ...queryForm, mediaType: e, pageNum: 1, pageSize: 20 }); }}>
                                {Object.keys(MEDIATYPE).map(key => <Select.Option value={key} key={key}>{MEDIATYPE[key as keyof typeof MEDIATYPE]}</Select.Option>)}
                            </Select>
                            <SelectTag value={queryForm?.mediaTagId} isPopup={false} onChange={(id) => { setQueryForm({ ...queryForm, mediaTagId: id, pageNum: 1, pageSize: 20 }); }} />
                        </Space>
                    </Card>
                    <Left
                        height={410}
                        id="scrollableDiv2"
                        flexNum={2}
                        isShow={false}
                        selectData={selectData}
                        setSelectData={setSelectData}
                        token={token}
                        data={data}
                        onChange={(value) => setSelectData(value)}
                        loading={getTemplateList.loading}
                        loadMore={loadMoreData}
                        setQueryForm={setQueryForm}
                        total={getTemplateList?.data?.data?.total || 0} />
                </Col>
                <Right
                    kxLength={dataLength - scLength}
                    textCount={textCount}
                    style={{ borderLeft: `1px solid ${token.colorBorderSecondary}`, height: '100%' }}
                    onChange={(data) => {
                        setXzData(data || [])
                    }}
                    value={selectData}
                    type={type}
                    noShowType={noShowType}
                    mediaSize={mediaSize}
                />
            </Row>
        </Card>
    </Modal>
}

export default React.memo(MaterialLibraryMould)