import { PureComponent } from 'react'
import { TreeSelect } from 'antd'
import { connect } from '@umijs/max'

const emptyValue = { label: null, value: null }

@connect(({ globaldata, loading }) => ({
    globaldata,
    loading: loading.models.globaldata
}))

class SelectMenuTree extends PureComponent {
    state = {
        treeData: [],
        cacheTreeData: [],
        value: emptyValue,
        cacheValue: emptyValue
    }

    static getDerivedStateFromProps (nextProps, state) {
        let newState = {}

        if (!!nextProps.treeData && nextProps.treeData !== state.cacheTreeData) {
            newState = {
                ...newState,
                treeData: nextProps?.treeData ?? [],
                cacheTreeData: nextProps?.treeData ?? []
            }
        }

        if (!!nextProps.value && nextProps.value !== state.cacheValue) {
            newState = {
                ...newState,
                value: nextProps?.value ?? emptyValue,
                cacheValue: nextProps?.cacheValue ?? emptyValue
            }
        }

        return Object.keys(newState)?.length > 0 ? newState : null
    }

    updateTreeData(list, key, children) {
        return list.map(node => {
            if (node.id === key) {
                return {
                    ...node,
                    children
                }
            } else if (node.children) {
                return {
                    ...node,
                    children: this.updateTreeData(node.children, key, children)
                }
            }

            return node
        })
    }

    loadData = ({ id, key, children }) => {
        const { dispatch, params: loadParams } = this.props
        const params = {
            parentid: id,
            ...loadParams
        }

        return new Promise(resolve => {
            if (children) {
                resolve()
                return
            }

            dispatch({
                type: 'globaldata/get_promenutree_by_parentid_for_promenu',
                payload: params,
                callback: res => {
                    if(res.success) {
                        this.setState({
                            treeData: this.updateTreeData(this.state.treeData, key, res.list)
                        })

                        resolve()
                    }
                }
            })
        })
    }

    onChange = (data, _, extra) => {
        const { selectMenuTree, onChange } = this.props
        const { label, value } = data ?? {}

        if (value === '000000000000') return
        const params = { label: label ?? null, value: value ?? null }

        selectMenuTree && selectMenuTree(params, label, extra)
        !selectMenuTree && onChange && onChange(params)
        this.setState({ value: params })
    }

    render () {
        const { treeData, value } = this.state

        return (
            <TreeSelect
                allowClear
                showSearch
                treeDefaultExpandAll
                labelInValue
                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                loadData={this.loadData}
                treeData={treeData}
                value={value}
                onChange={this.onChange}
                placeholder='请选择菜单'
                fieldNames={{ label: 'title', value: 'id', children: 'children' }}
            />
        )
    }
}

export default SelectMenuTree
