import React, { Component } from 'react';
import IceImg from '@ali/ice-img';
import '@ali/ice-img/lib/style';
import cx from 'classnames';
import Layout from '@ali/ice-layout';
import Menu from '@ali/ice-menu';
import '@ali/ice-menu/lib/style';
import { enquire } from 'enquire-js';
import Events from '@ali/ice-events';
import { Icon, Balloon, Button, Menu as BaseMenu } from '@icedesign/base';
import { Link, withRouter } from 'react-router';
import { headerNavs } from '../../navs';
import Search from '../Search';
import Logo from '../Logo';
import { login, isAlibaba, getUserInfo } from '../../utils';
import './Header.scss';

class NavChildren extends Component {
  state = {
    showChildren: false,
  };

  showChildren = () => {
    this.setState({
      showChildren: true,
    });
  };

  hideChildren = () => {
    this.setState({
      showChildren: false,
    });
  };

  renderPopup = (dataSource) => {
    const children = dataSource.map((item, idx) => {
      if (item.external) {
        return (
          <a
            className="nav-child-item"
            style={{
              display: 'block',
              padding: '0px 10px',
              lineHeight: '24px',
            }}
            target="_blank"
            href={item.to}
            key={item.to + idx}
          >
            {item.text}
          </a>
        );
      }
      if (item.group) {
        return (
          <div key={item.group + idx}>
            <h2 style={{ margin: 0, fontSize: '14px' }}>{item.group}</h2>
            {item.children &&
              item.children.map((_item, idx) => {
                return (
                  <div key={_item.text}>
                    <Link
                      activeClassName="active"
                      className="nav-child-item"
                      style={{
                        display: 'block',
                        padding: '0px 10px',
                        lineHeight: '24px',
                        fontSize: '12px',
                      }}
                      to={_item.to}
                    >
                      {_item.text}
                    </Link>
                  </div>
                );
              })}
          </div>
        );
      }
      return (
        <Link
          activeClassName="active"
          className="nav-child-item"
          style={{
            display: 'block',
            padding: '0px 10px',
            lineHeight: '24px',
            fontSize: '12px',
          }}
          key={item.text + idx}
          to={item.to}
        >
          {item.text}
        </Link>
      );
    });

    return <div style={{}}>{children}</div>;
  };

  render() {
    const { showChildren } = this.state;
    const { dataSource = [], nav } = this.props;
    return (
      <Balloon
        style={{ width: 120, padding: 10 }}
        trigger={
          <div>
            {nav.text}{' '}
            <Icon
              size="xxs"
              style={{ verticalAlign: 'top', marginRight: 0, marginTop: -1 }}
              type="arrow-down-filling"
            />
          </div>
        }
        closable={false}
      >
        {this.renderPopup(dataSource)}
      </Balloon>
    );
  }
}

@withRouter
@Events
export default class Header extends Component {
  static displayName = 'Header';

  state = {
    collapse: false,
    screenType: undefined,
  };

  componentDidMount() {
    this.enquireScreenRegister();
    this.fixHeaderNavActive();
    this.on('fix-header-nav-active', this.fixHeaderNavActive);
  }

  componentWillReceiveProps() {
    this.fixHeaderNavActive();
  }

  fixHeaderNavActive = () => {
    [].slice.call(document.querySelectorAll('.multi-nav')).forEach((node) => {
      node.classList.remove('multi-nav');
    });
    const activeNavs = [].slice.call(document.querySelectorAll('a.active'));
    if (activeNavs && activeNavs.length > 1) {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        activeNavs.slice(1).forEach((node) => {
          return node.parentElement.classList.add('multi-nav');
        });
      }, 10);
    }
  };

  enquireScreenRegister = () => {
    const isMobile = 'screen and (max-width: 780px)';
    const isTablet = 'screen and (min-width: 781px) and (max-width: 1199px)';
    const isDesktop = 'screen and (min-width: 1200px)';

    enquire.register(isMobile, this.enquireScreenHandle('isMobile'));
    enquire.register(isTablet, this.enquireScreenHandle('isTablet'));
    enquire.register(isDesktop, this.enquireScreenHandle('isDesktop'));
  };

  enquireScreenHandle = (type) => {
    let collapse;
    if (type === 'isMobile') {
      collapse = false;
    } else if (type === 'isTablet') {
      collapse = true;
    } else {
      collapse = this.state.collapse;
    }

    return {
      match: () => {
        this.setState({
          screenType: type,
          collapse,
        });
      },
      unmatch() {},
    };
  };

  // header 分块
  // logo
  // search
  // navs
  // user
  // ---
  // mobile:
  // logo left, user right
  // search, center
  // navs
  // ---
  // tablet
  // logo: left, search + user right
  // navs
  // ---
  // desktop
  // logo left, search + navs + user right
  renderLogo = () => {
    const { location } = this.props;
    return <Logo isDark={this.isDark} />;
  };

  _renderNavs = (navs) => {
    if (Array.isArray(navs)) {
      return (
        <Menu
          className={cx({
            'header-navs': true,
            ['header-navs-' + this.state.screenType]: true,
          })}
          mode="horizontal"
          selectedKeys={[]}
        >
          {navs.map((nav, idx) => {
            let linkProps = {};
            if (nav.external) {
              linkProps.href = nav.to;
              linkProps.target = nav.newWindow ? '_blank' : '_self';
            } else {
              linkProps.to = nav.to;
            }

            return (
              <Menu.Item key={idx}>
                <Link activeClassName="active" {...linkProps}>
                  {nav.icon ? <Icon type={nav.icon} size="xs" /> : null}

                  {nav.children && (
                    <NavChildren nav={nav} dataSource={nav.children} />
                  )}

                  {nav.text}
                </Link>
                {nav.group}
              </Menu.Item>
            );
          })}
        </Menu>
      );
    } else {
      return null;
    }
  };

  renderNavs = () => {
    if (headerNavs && headerNavs.length > 0) {
      let renderNavs = [...headerNavs];
      return this._renderNavs(renderNavs);

      // if (this.state.screenType !== 'isDesktop') {
      //   const extra = [];
      //   renderNavs = renderNavs
      //     .filter((item) => {
      //       if (item.children) {
      //         item.children.forEach((child) => {
      //           extra.push({ ...child });
      //         });
      //       }
      //       return !item.children;
      //     })
      //     .concat(extra);
      // }

      console.log(renderNavs);
      return (
        <Menu
          className={cx({
            'header-navs': true,
            ['header-navs-' + this.state.screenType]: true,
          })}
          mode="horizontal"
          selectedKeys={[]}
        >
          {renderNavs.map((nav, idx) => {
            let linkProps = {};
            if (nav.external) {
              linkProps.href = nav.to;
              linkProps.target = nav.newWindow ? '_blank' : '_self';
            } else {
              linkProps.to = nav.to;
            }

            return (
              <Menu.Item key={idx}>
                <Link activeClassName="active" {...linkProps}>
                  {nav.icon ? <Icon type={nav.icon} size="xs" /> : null}
                  {Array.isArray(nav.children) ? (
                    <NavChildren nav={nav} dataSource={nav.children} />
                  ) : (
                    nav.text || nav.group
                  )}
                </Link>
              </Menu.Item>
            );
          })}
        </Menu>
      );
    } else {
      return null;
    }
  };
  renderSearch = () => {
    return <Search />;
  };

  get isDark() {
    let pathname = this.props.location.pathname;
    pathname = pathname.replace(/^\/ice/, '');

    const isDark = ['', '/', '/iceworks', 'works'].indexOf(pathname) !== -1;
    return isDark;
  }
  renderUser = () => {
    const { location } = this.props;
    const user = getUserInfo() || {};
    const CustomLink = user.hasLogin ? 'a' : 'span';
    const customProps = {};
    if (user.hasLogin) {
      customProps.href = `https://work.alibaba-inc.com/nwpipe/u/${user.empId}`;
      customProps.target = '_blank';
    } else {
      customProps.onClick = login;
    }

    if (isAlibaba) {
      return (
        <CustomLink
          className="ice-admin-layout-header-userpannel"
          {...customProps}
        >
          {user.avatar && (
            <IceImg
              height={40}
              width={40}
              src={user.avatar}
              style={{ marginRight: '12px', borderRadius: 8 }}
            />
          )}
          <span
            style={{
              color: this.isDark ? 'rgba(255,255,255,0.7)' : '#666',
            }}
          >
            {user.username}
          </span>
        </CustomLink>
      );
    } else {
      return null;
    }
  };

  renderTablet = () => {
    return (
      <div
        className="ice-admin-layout-header header-tablet"
        style={{
          display: 'block',
          padding: '0 25px',
        }}
      >
        <div
          style={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            marginBottom: '10px',
          }}
        >
          {this.renderLogo()}
          <div
            className="header-tablet-children"
            style={{ display: 'flex', alignItems: 'center' }}
          >
            {this.renderSearch()}
            {this.renderUser()}
          </div>
        </div>
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'flex-end',
          }}
        >
          {this.renderNavs()}
        </div>
      </div>
    );
  };

  renderMobile = () => {
    return (
      <div
        className="ice-admin-layout-header header-mobile"
        style={{
          display: 'block',
          padding: '0 15px',
        }}
      >
        <div
          style={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
          }}
        >
          {this.renderLogo()}
          {this.renderUser()}
        </div>
        <div style={{ display: 'flex', alignItems: 'center' }}>
          {this.renderNavs()}
        </div>
      </div>
    );
  };

  renderDesktop = () => {
    return (
      <div className="ice-admin-layout-header">
        {this.renderLogo()}

        <div
          className="ice-admin-layout-header-menu"
          style={{ display: 'flex', alignItems: 'center' }}
        >
          {this.renderSearch()}
          {this.renderNavs()}
          {/* {this.renderPopup()} */}
          {this.renderUser()}
        </div>
      </div>
    );
  };

  render() {
    const { screenType } = this.state;

    let renderContent;
    switch (screenType) {
      // case 'isTablet':
      // renderContent = this.renderTablet;
      // break;
      case 'isMobile':
        renderContent = this.renderMobile;
        break;
      default:
        renderContent = this.renderDesktop;
    }

    return (
      <Layout.Header className={this.props.className}>
        {renderContent()}
      </Layout.Header>
    );
  }
}