function IsSelected(props) {
    const selected = props.IsSelected;
    if (selected) {
        return <span class="icon-x remove-filter"></span>;
    } else
        return <span></span>;
}

function IsDone(props) {
    const done = props.stateDictionary;
    if (done >= 9) {
       
        return <div></div>;
    } else {
       
        return <div class="load-tree"><img class="load-tree-view" src="/Content/Images/Spinner-1s-200px.gif" /></div>;
    }
}

class CatDictionary extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            error: null,
            isLoaded: false,
            listDictionary: []
        };
    }
    getParameterByName(name, url) {
        if (!url) url = window.location.href;
        name = name.replace(/[\[\]]/g, '\\$&');
        var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, ' '));
    }

    componentDidMount() {
        var dicType = this.props.dictionaryType;
        var currentUrl = encodeURIComponent(window.location.href);
        fetch("/Dictionary/GetDictionaryForFilterSearchAdvanceItem?dictionaryType=" +
            dicType +
            "&seacrhUrl=" +
            currentUrl)
            .then(res => res.json())
            .then(
                (result) => {
                    this.setState({
                        isLoaded: true,
                        listDictionary: result
                    });
                    this.props.updateTotalDictionary();
                },
                // Note: it's important to handle errors here
                // instead of a catch() block so that we don't swallow
                // exceptions from actual bugs in components.
                (error) => {
                    this.setState({
                        isLoaded: true,
                        error
                    });
                    this.props.updateTotalDictionary();
                }
            );

    }

    displayLoadingPage() {
        //window["displayLoadingBlockWindow"](true);
    }

    handleDisplayPopupClick(dictionaryType) {
        let ids = [];
        const { error, isLoaded, listDictionary } = this.state;
        const listDictionarys = listDictionary.ListDictionarys;
        listDictionarys.map(i => {
            ids.push(i.Id);
        });
        document.getElementById('DictionaryModal').style.display = "block";
        document.getElementById('ifrMoreDictionary').src =
            "/Dictionary/LoadMoreAdvancedListDictionary?DictionaryType=" +
            dictionaryType + "&PageIndex=1&OrderBy=1" + "&SkipIDs=" +
            ids.join(",") + "&SearchUrl=" + encodeURIComponent(window.location.href);
        
        return false;
    }



    render() {
        const { error, isLoaded, listDictionary } = this.state;
        const listDictionarys = listDictionary.ListDictionarys;
        const pagingFilteringContext = listDictionary.PagingFilteringContext;
        let addMore;
        if (error) {
            return <div></div>;
        } else if (!isLoaded) {
            return <div></div>;
        } else {
            if (pagingFilteringContext.TotalPages >= 2) {
                addMore = <li class="xem_them"><a onClick={() => this.handleDisplayPopupClick(this.props.dictionaryType)}>Xem thêm &gt;&gt;&gt;</a></li>;
            }
            else {
                addMore = <li></li>;
            }
            if (listDictionarys.length == 0) {
                return <div></div>;
            } else {
                return (
                    <li class="root ">
                        <a data-toggle="collapse" class="icon-btn" data-target={"#tag" + this.props.dictionaryType}> {this.props.title} </a>
                        <ul id={"tag" + this.props.dictionaryType} class="sub-filter ">
                            {listDictionarys.map(item => (
                                <li class="lv1">
                                    <a onClick={() => this.displayLoadingPage()}  href={item.UrlLink}>{item.DisplayEntry}  ({item.NumberNo})
                                    <IsSelected IsSelected={item.IsSelected} href={item.UrlLink} /></a>
                                </li>
                            ))}
                            {addMore}
                        </ul>
                    </li>
                );
            }
        }
    }
}

class CatYearDictionary extends CatDictionary {
    constructor(props) {
        super(props);
    }

    handleDisplayPopupClick(dictionaryType) {
        document.getElementById('DictionaryModal').style.display = "block";
        document.getElementById('ifrMoreDictionary').src = "/Dictionary/LoadMoreAdvancedListDictionary?DictionaryType=" + dictionaryType + "&SearchUrl=" + encodeURIComponent(window.location.href) + "&PageIndex=1&OrderBy=2";
        return false;
    }

    render() {
        const { error, isLoaded, listDictionary } = this.state;
        const listDictionarys = listDictionary.ListDictionarys;
        const pagingFilteringContext = listDictionary.PagingFilteringContext;
        let addMore;

        if (error) {
            return <div></div>;
        } else if (!isLoaded) {
            return <div></div>;
        } else {

            if (pagingFilteringContext.TotalPages >= 2) {
                addMore = <li class="xem_them"><a onClick={() => this.handleDisplayPopupClick(this.props.dictionaryType)}>Xem thêm &gt;&gt;&gt;</a></li>;
            } else {
                addMore = <li></li>;
            }
            if (listDictionarys.length == 0) {
                return <div></div>;
            }
            else {
                return (
                    <li class="root ">
                        <a data-toggle="collapse" data-target={"#tag" + this.props.dictionaryType}> {this.props.title} </a>
                        <ul id={"tag" + this.props.dictionaryType} class="sub-filter">
                            {listDictionarys.map(item => (
                                <li class="lv1">
                                    <a href="javascript:void(0)" data-toggle="collapse" data-target={"#child-tag" + item.Id}>{item.DisplayEntry} ({item.NumberNo})</a>
                                    <ul id={"child-tag" + item.Id} class="collapse">
                                        {
                                            item.ChildModels.map(
                                                childItem => (
                                                    <li class="lv1">
                                                        <a href={childItem.UrlLink}>{childItem.DisplayEntry} ({childItem.NumberNo})
                                                        <IsSelected IsSelected={childItem.IsSelected} href={childItem.UrlLink} /></a>
                                                    </li>
                                                )
                                            )
                                        }
                                    </ul>
                                    <IsSelected IsSelected={item.IsSelected} href="javascript:void(0)" />
                                </li>
                            ))}
                            {addMore}
                        </ul>
                    </li>
                );
            }

        }
    }
}

class DictionaryTree extends React.Component {
    constructor(props) {
        super(props);
        this.state = { totalDictionary: 0 };
        this.countCallAjaxDictionary = this.countCallAjaxDictionary.bind(this);
    }
    countCallAjaxDictionary() {
        this.setState({ totalDictionary: this.state.totalDictionary + 1 });
    }

    render() {

        return (
            <div class="filter filter-search">
                <a href="javascript:void(0)" class="menu-fitter"><i class="fas fa-filter"></i></a>
                <ul class="list-filter" id="menu_fitter">
                    <CatDictionary updateTotalDictionary={this.countCallAjaxDictionary} stateDictionary={this.state.totalDictionary} dictionaryType="10" title="Dạng tài liệu" />
                    <CatDictionary updateTotalDictionary={this.countCallAjaxDictionary} stateDictionary={this.state.totalDictionary} dictionaryType="11" title="Định dạng tài liệu" />
                    <CatDictionary updateTotalDictionary={this.countCallAjaxDictionary} stateDictionary={this.state.totalDictionary} dictionaryType="1" title="Tác giả" />
                    {/*<CatDictionary updateTotalDictionary={this.countCallAjaxDictionary} stateDictionary={this.state.totalDictionary} dictionaryType="3" title="Từ khóa" />*/}
                    {/*<CatDictionary updateTotalDictionary={this.countCallAjaxDictionary} stateDictionary={this.state.totalDictionary} dictionaryType="5" title="Tiêu đề đề mục" />*/}
                    <CatDictionary updateTotalDictionary={this.countCallAjaxDictionary} stateDictionary={this.state.totalDictionary} dictionaryType="2" title="Nhà xuất bản" />
                    <CatDictionary updateTotalDictionary={this.countCallAjaxDictionary} stateDictionary={this.state.totalDictionary} dictionaryType="9" title="Năm xuất bản" />
                    <CatDictionary updateTotalDictionary={this.countCallAjaxDictionary} stateDictionary={this.state.totalDictionary} dictionaryType="8" title="Phân loại DDC" />
                    <CatDictionary updateTotalDictionary={this.countCallAjaxDictionary} stateDictionary={this.state.totalDictionary} dictionaryType="4" title="Series" />
                    <CatDictionary updateTotalDictionary={this.countCallAjaxDictionary} stateDictionary={this.state.totalDictionary} dictionaryType="6" title="Ngôn ngữ" />
                    <CatDictionary updateTotalDictionary={this.countCallAjaxDictionary} stateDictionary={this.state.totalDictionary} dictionaryType="12" title="Thư viện" />
                    {/*<CatDictionary updateTotalDictionary={this.countCallAjaxDictionary} stateDictionary={this.state.totalDictionary} dictionaryType="13" title="Loại tài liệu" />*/}
                </ul>
                <IsDone stateDictionary={this.state.totalDictionary} />
            </div>
        )
    }
}

ReactDOM.render(<DictionaryTree />, document.getElementById("column-right"));