import React, { useState, useEffect } from 'react'
import { Menu, Dropdown } from 'antd'
import 'antd/lib/style/index.css';
import '../shixunCss/shixun-search-bar.scss'
import axios from 'axios'
import A from './A.jsx'

const DiffObject = [
    { id: 0, text: '全部难度' },
    { id: 1, text: '初级' },
    { id: 2, text: '中级' },
    { id: 3, text: '中高级' },
    { id: 4, text: '高级' }
]
export default ({ StatusEnquiry, allUpdatashixunlist, Updatasearchlist,parsedid,newpalce }) => {
    const [data, setData] = useState({
        diff: 0,
        searchValue: newpalce || 'a',
        navs: [],
        searchKey: '',
        childValue:parsedid
    })
    const { diff, searchValue, navs, childValue, searchKey } = data
    function diffSearch(diff) {
        setData({
            ...data,
            diff
        })
        StatusEnquiry([{ 'type': 2 }, { 'value': diff }])
    }
    useEffect(() => {
        setData({
            ...data,
            searchValue: newpalce || 'a',
            childValue: parsedid
        })
    },[
        newpalce,navs,parsedid
    ])
    function onSearchAll() {
        if (searchValue !== 'a') {
            setData({ ...data, searchValue: 'a', childValue: '' })
            allUpdatashixunlist()
        }
    }
    function getChildValue(e) {
        let id = e.target.name
        let newid = e.target.id
        if (id || newid) {
            setData({ ...data, searchValue: newid })
            Updatasearchlist([{ 'tag_level': 2 }, { 'tag_id': id }])
        }
    }
    function getChildValues(e) {
        let id = e.target.id;
        let newid = e.target.name;
        if (id || newid) {
            setData({ ...data, searchValue: newid, childValue: id })
            Updatasearchlist([{ 'tag_level': 3 }, { 'tag_id': id }])
        }
    }
    function onSearchBranch(e) {
        const id = e.target.value
        if (id != searchValue) {
            setData({ ...data, searchValue: id, childValue: '' })
            Updatasearchlist([{ 'tag_level': 1 }, { 'tag_id': id }])
        }

    }
    function overlayMenu(item, id) {
        return <Menu>
            {
                item.map((list, k) => <Menu.Item key={list.id}>
                    <div className="mt5 subshaicontent-part"   >
                        <a style={{ height: '20px' }} className={"mb15 shixun_repertoire color-dark"} name={list.id} id={id} onClick={getChildValue}>{list.name}</a>
                        <div className="sub-Item clearfix">
                            {
                                list.tags.map((tag, e) => <a className={childValue == tag.id ? "shixun_repertoire color-blue" : "shixun_repertoire"} key={e} id={tag.id} name={id} rel="subshaicontent" onClick={getChildValues}>{tag.name}</a>
                                )
                            }
                        </div>
                    </div>
                </Menu.Item>
                )
            }
        </Menu>

    }
    useEffect(() => {
        async function init() {
            const response = await axios.get('/shixuns/menus.json')
            setData({ ...data, navs: response.data })
        }
        init()
    }, [])
    return (
        <div className="edu-back-white shixun-search-bar" >
            <div className="educontent">
                <div className="pt_b_26">
                    <div className="clearfix mb20 shaiContent">
                        <span className="shaiTitle fl">方向：</span>
                        <div className="fl pr shaiAllItem">
                            <li className={searchValue === "a" ? "shaiItem shixun_repertoire active" : "shaiItem shixun_repertoire"} value="a" onClick={onSearchAll}>全部</li>
                            {
                                navs.map((item, key) => {
                                    return (
                                        <Dropdown overlayStyle={{width:400}} overlay={overlayMenu(item.sub_repertoires, item.id)} key={key} placement={"bottomLeft"}>
                                            <li key={item.id} className={searchValue == item.id ? "shaiItem shixun_repertoire active" : "shaiItem shixun_repertoire"} value={item.id} onClick={onSearchBranch}>
                                                {item.name}
                                            </li>
                                        </Dropdown>
                                    )
                                })
                            }


                        </div>
                    </div>
                    <div className="clearfix">
                        <span className="shaiTitle fl">筛选：</span>
                        <div className="fl pr shaiAllItem mt1">
                            {DiffObject.map(item => <A key={item.id} {...item} callback={diffSearch} activeId={diff} />)}
                        </div>

                    </div>
                </div>
            </div>
        </div>
    )
}
