/**
 * Created by baoyinghai on 4/18/17.
 */
import React from 'react';
import doubleArrow from '../../asset/double_arrow.png';
import Link from './Link';
import Href, { queryAnchor } from './anchorHref';
import { clone } from '../../framework/utils/EmptyUtils';

export default class Anchor extends React.Component {

  static defaultProps = {
    offset: 6,
  };

  constructor(props) {
    super(props);
    const { links, offset } = this.props;
    this.state = {
      offset: offset,
      shortcutName: null,
      isOpen: false
    };
  }

  _moveArrow = e => {
    const { links = [] } = this.props;
    if (links.length > 0) {
      const tag = links.filter(p => p.offsetTop >= window.scrollY);
      if (tag[0]) {
        const index = tag[0].index;
        /* eslint-disable */
        this.setState({ offset: this.props.offset + index * 31, shortcutName: tag[0].title });
      }
    }
  };

  affixShortcutMouseOver = e => {
    if (e.target.className === 'affix-shortcut' && !this.state.isOpen) {
      this.setState({
        isOpen: true
      });
    }
  };

  componentDidMount() {
    window.addEventListener('scroll', this._moveArrow);
  }

  componentWillUnmount() {
    window.addEventListener('scroll', this._moveArrow);
  }

  _dealShortcutName = shortcutName => {
    if (shortcutName.length > 4) {
      return shortcutName.substr(0, 4) + '...';
    }
    return shortcutName;
  };

  _arrowClick = e => {
    this.setState({
      isOpen: false
    });
  };

  render() {
    const { links = [] } = this.props;
    const affixWrapperStyle = { border: 0, padding: 0, minWidth: 100 };
    let shortcutName = this.state.shortcutName;
    if (links.length > 0 && !this.state.shortcutName) {
      shortcutName = links[0].title;
      // const linksTop = [];
      // links.forEach(item => linksTop.push(item.offsetTop));
      // const currentScrollY = window.scrollY + window.innerHeight;
      // linksTop.push(currentScrollY);
      // linksTop.sort((a, b) => a - b);
      // if (links[linksTop.indexOf(currentScrollY) - 1]) {
      //   shortcutName = links[linksTop.indexOf(currentScrollY) - 1].title;
      // }
    }
    /* eslint-disable */
    return (
      <div className="affix-wrapper" style={links.length ? null : affixWrapperStyle}>
        <div className="btn-list">
          <div style={{ width: 100, float: 'right', marginBottom: 3 }}>
            {this.props.children}
          </div>
          <div className="affix-shortcut-wrapper" onMouseOver={this.affixShortcutMouseOver}>
            {links.length > 0 && (
              <div className="affix-shortcut" style={!this.state.isOpen ? { width: 100, float: 'right', backgroundColor: '#272E31' } : { backgroundColor: '#00AEEC' }}>
                <span>{this.state.isOpen ? shortcutName : this._dealShortcutName(shortcutName)}</span>
                {this.state.isOpen && (<img src={doubleArrow} onClick={this._arrowClick} />)}
              </div>
            )}
          </div>
        </div>
        {this.state.isOpen && (
          <div className="href-list" style={{ display: links.length ? 'block' : 'none' }}>
            <div className="arrow-pointer" style={{ marginTop: this.state.offset + 5 }}>
              <div className="right-arrow"></div>
            </div>
            <ul>
              {links.map(p => (
                <Link key={p.href} {...p} />
              ))}
            </ul>
          </div>
        )}
      </div>
    );
  }
}

export const ArchorHref = Href;

export const archorQuery = queryAnchor;
