import React from 'react';
import { Tabs } from 'antd';
import PropTypes from 'prop-types';
import { browserHistory } from 'react-router';

function isLeftClickEvent(event) {
  return event.button === 0;
}

function isModifiedEvent(event) {
  return !!(
    event.metaKey ||
    event.altKey ||
    event.ctrlKey ||
    event.shiftKey
  );
}

function createLocationDescriptor(to, query, hash, state) {
  if (query || hash || state) {
    return { pathname: to, query, hash, state };
  }

  return to;
}

function resolveToLocation(to, router) {
  return typeof to === 'function' ? to(router.location) : to;
}

const propTypes = {
  // onlyActiveOnIndex: PropTypes.bool.isRequired,
  // to: PropTypes.oneOfType([
  //   PropTypes.string,
  //   PropTypes.object,
  //   PropTypes.func,
  // ]).isRequired,
  query: PropTypes.string,
  hash: PropTypes.string,
  state: PropTypes.object,
  action: PropTypes.oneOf([
    'push',
    'replace',
  ]).isRequired,
  onClick: PropTypes.func,
  active: PropTypes.bool,
  target: PropTypes.string,
  children: PropTypes.node.isRequired,
};

const contextTypes = {
  router: PropTypes.object,
};

const defaultProps = {
  onlyActiveOnIndex: false,
  action: 'push',
};

class RoutedTabs extends React.Component {
  static propTypes = propTypes;
  static defaultProps = defaultProps;
  static contextTypes = contextTypes;

  onClick = (event) => {
    const {
      to, query, hash, state, children, onClick, target, action,
    } = this.props;

    const { router } = this.context;

    const toLocation = resolveToLocation(to, router);

    if (children.props.onClick) {
      children.props.onClick(event);
    }

    if (onClick) {
      onClick(event);
    }

    if (
      target ||
      event.defaultPrevented ||
      isModifiedEvent(event) ||
      !isLeftClickEvent(event)
    ) {
      return;
    }

    event.preventDefault();

    router[action](
      createLocationDescriptor(toLocation, query, hash, state)
    );
  };

  // returns [activeKey, children]
  generateChildren = () => {
    let activeKey = null;
    const { router } = this.context;

    const children = React.Children.map(this.props.children, (child) => {
      const toLocation = resolveToLocation(child.props.to, router);
      if (router.isActive(toLocation, false)){
        activeKey = ".$" + child.key.toString();
      }

      return React.cloneElement(child, {to: undefined });
    });
    return [activeKey, children];
  }

  onChange = (key) => {
    const childkey = key.substring(2);
    let route;
    React.Children.forEach(this.props.children, child => {
      if(child.key.toString() === childkey)
        route = child.props.to
    });
    if(route)
      browserHistory.push(route)
  }

  render(){
    // const { onlyActiveOnIndex, to, children, ...props } = this.props;

    // props.onClick = this.onClick;

    // // Ignore if rendered outside Router context; simplifies unit testing.
    // if (router) {
    //   props.href = router.createHref(toLocation);

    //   if (props.active == null) {
    //     props.active = router.isActive(toLocation, onlyActiveOnIndex);
    //   }
    // }

    const [activeKey, childs] = this.generateChildren();
    return (
      <Tabs activeKey={activeKey} onChange={this.onChange}>
        {childs}
      </Tabs>
    );

    // return React.cloneElement(React.Children.only(children), props);
  }
}

export default RoutedTabs;