import React from "react";
import HomeBtn from '../commen/homeBtn/index'
import IconHtml from '../../../common/iconHtml/index'


type defaultProps = {}

type ContentData = {} & defaultProps

interface LPData {
    content: Array<ContentData>,

    [propsName: string]: any
}

interface LPType {
    content: any,

    [propsName: string]: any
}

type IPropTypes = {
    source?: ContentData,
    [propsName: string]: any
}


const CLASS = 'm-pageNav-';

class WordNav extends React.Component<IPropTypes, any> {
    constructor(props) {
        super(props);

        this.state = {
            source: [],
        }
    }

    componentDidMount() {

    }

    goPage(href) {
        if (this.props.env == 'isMp') {
            this.props.goMpPath(href);
        } else {
            window.location.href = href
        }
    }

    render() {
        let source = this.props;
        let content = source;
        return (
            <div className={''}>
                {
                    content ? <div className={CLASS + 'pageNav ' + CLASS + 'circle-pageNav'}>
                        {
                            content.useHomeBtn ?
                                <HomeBtn data={content.homeList}></HomeBtn> : ''
                        }
                        {
                            content.pageList && content.pageList.length > 0 ?
                                content.pageList.map((item, index) => {

                                    let num = content.pageList.length;
                                    if (content.useHomeBtn) {
                                        if (num <= 2) {
                                            num = 2;
                                        } else {
                                            num = 5;
                                        }
                                    }
                                    if (window.location.href.indexOf(item.link) >= 0) {
                                        item.active = true
                                    } else {
                                        item.active = false
                                    }


                                    return (
                                        <span onClick={this.goPage.bind(this, item.link)}
                                              className={
                                                  CLASS + 'every ' + CLASS + 'circleEvery ' +
                                                  (item.active ? CLASS + "active " : "")
                                              }
                                              style={{
                                                  width: (100 / num) + "%",
                                                  marginLeft: content.useHomeBtn && index == 2 ? (100 / num) + '%' : ''
                                              }}>
                                            <IconHtml data={item} classBefore={CLASS}></IconHtml>
                                        </span>
                                    )
                                }) : ""
                        }
                    </div> : ''
                }
            </div>
        );
    }
}

export default WordNav;