import React, { useState } from 'react';

import classNames from 'classnames';
import PinyinMatch from 'pinyin-match';
import { useHistory } from 'react-router-dom';

import Icon, { RightCircleOutlined } from '@ant-design/icons';

import Modal from '../modal';
import styes from './index.less';

const HistorySvg = () => (<svg className="icon" viewBox="0 0 1024 1024" version="1.1" width="10" height="10"><path d="M1016.405333 0h-351.573333a7.594667 7.594667 0 0 0-5.376 12.885333l149.077333 149.674667-244.224 249.770667H434.346667A7.594667 7.594667 0 0 0 426.666667 419.84v169.898667c0 4.266667 3.413333 7.594667 7.594666 7.594666h169.813334c4.266667 0 7.68-3.413333 7.68-7.594666V486.826667l263.253333-257.792 136.106667 135.509333A7.594667 7.594667 0 0 0 1024 359.253333V7.68A7.594667 7.594667 0 0 0 1016.405333 0z"  fill="#C1C1C1"></path><path d="M979.626667 640a45.226667 45.226667 0 0 0-44.202667 46.08v249.258667H88.490667V88.576h245.418666l1.194667-0.085333A45.056 45.056 0 0 0 378.88 44.288 45.056 45.056 0 0 0 333.994667 0H7.68A7.68 7.68 0 0 0 0 7.68v1008.64c0 4.266667 3.413333 7.68 7.68 7.68h1008.64c4.266667 0 7.68-3.413333 7.68-7.68V686.08a45.226667 45.226667 0 0 0-44.373333-46.08z" fill="#C1C1C1"></path></svg>);
const DelHistory  = () => (<svg className="icon" viewBox="0 0 1024 1024" version="1.1" width="12" height="12"><path d="M153.6 345.6a38.4 38.4 0 0 1 0-76.8h665.6a38.4 38.4 0 1 1 0 76.8H153.6z" fill="#888888" ></path><path d="M345.6 307.2a38.4 38.4 0 0 1-76.8 0V204.8c0-49.4592 40.1408-89.6 89.6-89.6h256c49.4592 0 89.6 40.1408 89.6 89.6v102.4a38.4 38.4 0 1 1-76.8 0V204.8a12.8 12.8 0 0 0-12.8-12.8H358.4a12.8 12.8 0 0 0-12.8 12.8v102.4zM166.4 460.8a38.4 38.4 0 0 1 76.8 0v358.4c0 7.0656 5.7344 12.8 12.8 12.8h460.8a12.8 12.8 0 0 0 12.8-12.8V460.8a38.4 38.4 0 1 1 76.8 0v358.4A89.6 89.6 0 0 1 716.8 908.8H256A89.6 89.6 0 0 1 166.4 819.2V460.8z" fill="#888888"></path><path d="M371.2 460.8a38.4 38.4 0 0 1 76.8 0v256a38.4 38.4 0 1 1-76.8 0V460.8zM524.8 460.8a38.4 38.4 0 0 1 76.8 0v256a38.4 38.4 0 1 1-76.8 0V460.8z" fill="#888888"></path></svg>)
const HistoryHrefIcon = props => <Icon component={HistorySvg} {...props} />;
const DelIcon = props => <Icon component={DelHistory} {...props}/>
const unique = (arr, val) => {
    const res = new Map();
    return arr.filter(item => !res.has(item[val]) && res.set(item[val], 1))
}
const SearchPanel = props => {
    const [visible, setVisible] = useState(false);
    const [disabled, setDisabled] = useState(false);
    const [axis, setAxis] = useState("both");

    let recentKeywords = props.recentKeywords.toJS ? props.recentKeywords.toJS(): props.recentKeywords;
    recentKeywords = Array.isArray(recentKeywords) ? recentKeywords: [recentKeywords];

    let recentVisited = props.recentVisited.toJS ? props.recentVisited.toJS(): props.recentVisited;
    recentVisited = Array.isArray(recentVisited) ? recentVisited: [recentVisited];

    let recentProducts = props.recentProducts.toJS ? props.recentProducts.toJS(): props.recentProducts;
    recentProducts = Array.isArray(recentProducts) ? recentProducts: [recentProducts];

    const history = useHistory();
    
    const goFeature = (path, rect, value) => {
        value = value ? value: props.value;
        const findKeywordIndex = recentKeywords.length > 0 ? recentKeywords.findIndex(item => item.data === value): -1;
        const findRecentVisitedIndex = recentVisited.length > 0 ? recentVisited.findIndex(item => item.data.name === rect.name): -1
        if(findKeywordIndex === -1) props.updateRecentKeywords && props.updateRecentKeywords(value);
        if(findRecentVisitedIndex === -1) props.updateRecentVisited && props.updateRecentVisited(rect);
        history.push(path)
    }
    const goProduct = (event, item) => {
        event.persist && event.persist()
        event && event.stopPropagation();
        const findRecentIndex = recentProducts.length > 0 ? recentProducts.findIndex(item => item.data.name === item.name): -1
        if(findRecentIndex === -1) props.updateRecentProduct && props.updateRecentProduct(item);
        const findIndex = props.menu.findIndex(k => k.name === item.name);
        props.updateCurrentIndex && props.updateCurrentIndex(findIndex);
    }

    const handlerMore = (event) => {
        debugger
        event.persist && event.persist()
        event && event.nativeEvent.stopImmediatePropagation()
        setVisible(true)
        props.onClose && props.onClose(event);
    }

    // const historyProduct = (event, item) => {
    //     event.persist && event.persist()
    //     event && event.stopPropagation();
    //     const findIndex = props.menu.findIndex(k => k.name === item.name);
    //     props.updateCurrentIndex && props.updateCurrentIndex(findIndex);

    // }

    const handlerDelHistory = () => {
        props.clearRecentProduct && props.clearRecentProduct()
    }

    const matchValue = (str, value) => {
        const match = PinyinMatch.match(str, value ? value: props.value)
        return match
    }

    const transformRecentProduct = () => {
        return unique((recentProducts).map(item => item.data), 'name');
    }

    const transformWillSearch = () => {
        if(props.willSearch.length === 0) {
            return null
        }
        return (
            <div className={styes.item}>
                <div className={styes.title}>你是不是想搜：</div>
                    <div className={styes.label}>
                        {
                            (unique(props.willSearch, 'name') || []).map(item => {
                                return (
                                    <button className={styes.btn} key={item.name} title={item.title} onClick={() => props.onWillSearch(item.name)}>{item.name}</button>
                                )
                            })
                        }
                    </div>
            </div>
        )
    }

    const transformConsole = () => {
        if(props.console.length === 0) {
            return <div className={styes.empty}>没有找到相关内容</div>
        }
        return (props.console || []).map((item, index) => {
            const match =  matchValue(item.name)
            const name = match ? (
                <span>
                    {
                        item.name.substring(0, match[0])
                    }
                    <em>
                        {
                            item.name.substring(match[0], match[1] + 1)
                        }
                    </em>
                    {
                        item.name.substring(match[1] + 1)
                    }
                </span>
            ): item.name;
            return (
                <a className={styes.featureItem} key={item.name} onClick={(event) => goProduct(event, item)}>
                    <span className={styes.text}>
                        {
                            name
                        }
                    </span>
                    <span className={styes.featIn}>
                        <RightCircleOutlined/>
                    </span>
                </a>
            )
        })
    }

    const transformFeature = () => {
        if(props.willSearch.length === 0) {
            return <div className={styes.empty}>没有找到相关内容</div>
        }
        return (unique(props.willSearch.slice(0, 20), 'path') || []).map((item, index) => {
            const match =  matchValue(item.name)
            const name = match ? (
                <span>
                    {
                        item.name.substring(0, match[0])
                    }
                    <em>
                        {
                            item.name.substring(match[0], match[1] + 1)
                        }
                    </em>
                    {
                        item.name.substring(match[1] + 1)
                    }
                </span>
            ): item.name;
            return (
                <a className={styes.featureItem} key={index} onClick={() => goFeature(item.path, item)}>
                    <span className={styes.text}>
                        {
                                name
                        }
                        <HistoryHrefIcon className={styes.href}/>
                    </span>
                    <span className={styes.featIn}>{item.parent && item.parent.name}</span>
                </a>
            )
        })
    }
   
    return (
        <div className={classNames(styes.searchPanel, props.className)} style={props.style} onMouseEnter={props.onMouseEnter} onMouseLeave={props.onMouseLeave}  onFocus={props.onFocusChange}>
            <div className={styes.container}>
                {
                    props.value === "" &&  (
                        <div className={styes.body} style={{display: 'flex'}}>
                            <div className={styes.flexItem}>
                                {
                                    recentKeywords.length > 0 ? (
                                        <>
                                            <h5 className={styes.historyTitle}>
                                                最近搜索
                                                <DelIcon onClick={handlerDelHistory}/>
                                            </h5>
                                            <div className={styes.label}>
                                                {
                                                    (unique(recentKeywords, 'data') || []).map(item =>  <button className={styes.btn} title={item.data} key={item.data} onClick={() => props.onWillSearch(item.data)}>{item.data}</button> )
                                                }
                                            </div>
                                        </>
                                    ): null
                                }
                               
                                <h5 className={styes.historyTitle} style={{margin: recentKeywords.length > 0 ? '16px 0px 0px': '0'}}>
                                    最近访问的产品
                                </h5>
                                {
                                   recentProducts.length > 0 ? (transformRecentProduct() || []).map(item => {
                                        return (
                                            <a title={item.name} className={styes.historyHref} key={item.name} onClick={(event) => goProduct(event, item)}>
                                                <span className={styes.title}>{item.name}</span>
                                                <span className={styes.featIn}>
                                                    <RightCircleOutlined/>
                                                </span>
                                            </a>
                                        )
                                    }): (
                                        <div className={styes.empty}>无最近访问的产品</div>
                                    )
                                }
                               
                            </div>
                            <div className={styes.flexItem}>
                                <div className={styes.title}>关注更多信息</div>
                                <div className={styes.label}>
                                    <div className={styes.empty}>没有找到相关内容</div>
                                </div>
                            </div>
                    </div>
                    )
                }
                {
                    props.value !== "" && (
                        <>
                            <div className={styes.body}>
                                {
                                    transformWillSearch()
                                }

                                <div className={styes.features}>
                                    <div className={styes.flex}>
                                        <h5 className={styes.title}>产品入口({props.console.length})</h5>
                                        <div className={styes.feature}>
                                            {
                                                transformConsole()
                                            }
                                        
                                        </div>
                                    </div>
                                    <div className={styes.flex}>
                                        <h5 className={styes.title}>快捷操作</h5>
                                        <div className={styes.feature}>
                                            {
                                                transformFeature()
                                            }    
                                        </div>
                                        
                                    </div>
                                </div>
                            </div>
                            {
                                (props.willSearch.length > 0 || props.console.length > 0) ? (
                                    <div className={styes.footer}>
                                        <span onClick={handlerMore}>查看全部结果</span>
                                    </div>
                                ): null
                            }
                            
                        </>
                    )
                }
            </div>
            {
                visible ? <Modal visible={visible} triggerElRef={props.target} {...props} matchValue={matchValue} goFeature={goFeature} goProduct={goProduct}/>: null
            }
        </div>
    )
}

export default SearchPanel;