import React, { Component } from 'react'
import { AutoComplete, Input } from 'antd'
import { AntIcon } from 'components'
import store from 'store'
import { concat } from 'lodash'

const { getState, subscribe } = store

function unZip(menus) {
    const result = []
    menus.forEach(item => {
        if (item.children) {
            result.push({
                parent: item.meta.title,
                children: item.children,
            })
        } else {
            result.push({
                parent: item.meta.title,
                children: [item],
            })
        }
    })
    return result
}

function renderTitle(title) {
    return <span>{title}</span>
}

function renderItem(title, menu) {
    return {
        value: title,
        openType: menu.openType,
        component: menu.component,
        link: menu.link,
        redirect: menu.redirect,
        menu,
        label: (
            <>
                {title}
                <div className="text-normal">
                    {
                        {
                            1: menu.component,
                            2: menu.link,
                            3: menu.redirect,
                        }[menu.openType]
                    }
                </div>
            </>
        ),
    }
}

export default class search extends Component {
    state = {
        options: [],

        searchValue: '',
    }

    nav = getState('nav').nav

    autoComplete = React.createRef()

    constructor(props) {
        super(props)

        this.unsubscribe = subscribe('nav', state => {
            this.getOptions(state.nav)
        })
    }

    componentDidMount() {
        this.getOptions(this.nav)
    }

    componentWillUnmount() {
        this.unsubscribe()
    }

    onSearch(searchValue, option) {
        searchValue = searchValue.toLowerCase()
        return (
            (option.value && option.value.toLowerCase().includes(searchValue)) ||
            (option.openType === 1 &&
                option.component &&
                option.component.toLowerCase().includes(searchValue)) ||
            (option.openType === 2 &&
                option.link &&
                option.link.toLowerCase().includes(searchValue)) ||
            (option.openType === 3 &&
                option.redirect &&
                option.redirect.toLowerCase().includes(searchValue))
        )
    }

    onSelect(value, option) {
        const { id, meta, component, link, redirect, openType } = option.menu

        // 选中时清空输入框内容,并失去焦点
        this.setState({ searchValue: '' })
        this.autoComplete.current.blur()

        window.openContentWindow({
            key: id,
            title: meta.title,
            icon: meta.icon,
            path: (() => {
                switch (openType) {
                    case 1:
                        return component
                    case 2:
                        return link
                    case 3:
                        return redirect
                    default:
                        return null
                }
            })(),
            openType,
        })
    }

    getOptions(nav) {
        const menus = unZip(
            concat.apply(
                this,
                nav.map(p => p.menu)
            )
        )

        const options = menus.map(item => {
            if (item.parent) {
                return {
                    label: renderTitle(item.parent),
                    options: item.children.map(menu => {
                        return renderItem(menu.meta.title, menu)
                    }),
                }
            } else {
                return {
                    options: item.children.map(menu => {
                        return this.renderItem(menu.meta.title, menu)
                    }),
                }
            }
        })
        this.setState({ options })
    }

    render() {
        const { options, searchValue } = this.state

        return (
            <AutoComplete
                ref={this.autoComplete}
                value={searchValue}
                options={options}
                dropdownMatchSelectWidth={false}
                dropdownStyle={{ width: '300px' }}
                dropdownClassName="certain-category-search-dropdown"
                optionFilterProp="value"
                filterOption={(searchValue, option) => this.onSearch(searchValue, option)}
                onSelect={(value, option) => this.onSelect(value, option)}
                onChange={value => this.setState({ searchValue: value })}
            >
                <Input
                    allowClear
                    placeholder="请输入检索关键字"
                    suffix={<AntIcon type="search" />}
                />
            </AutoComplete>
        )
    }
}
