import React, { Component } from 'react';
import './Tabs.scss';

const transitionTime = 200;
const transitionStyle = `left ${transitionTime}ms, right ${transitionTime}ms`;

class Tabs extends Component {
   constructor(props) {
      super(props);
      this.state = {
         sizes: {},
         // Understand that this is what the style attribute value should be set to but how do I update it, it relies on this.state.sizes to be populated but cannot get it to a stage where it is populated???
         underLineStyle: {},
      };
      this.els = {};
      this.getSizes = this.getSizes.bind(this);
      this.getUnderlineStyle = this.getUnderlineStyle.bind(this);
   }

   componentDidMount() {
   // Is this the correct way to set the state???
      this.setState({
         sizes: this.getSizes()
      });
   }

   componentDidUpdate(prevProps, prevState) {
      if (prevProps.children !== this.props.children && prevProps.active !== this.props.active) {
         this.setState({
            sizes: this.getSizes()
         });
      }
   }

   getSizes() {
      const rootBounds = this.root.getBoundingClientRect();

      const sizes = {};

      Object.keys(this.els).forEach((key) => {
         const el = this.els[key];
         const bounds = el.getBoundingClientRect();

         const left = bounds.left - rootBounds.left;
         const right = rootBounds.right - bounds.right;

         sizes[key] = { left, right };
      });

      return sizes;
   }

   getUnderlineStyle() {
   // Calling this from within componentDidMount, this.state.sizes is empty?
   // Calling this directly on style attribute works but cannot manipulate on hover???
      if (this.props.active == null || Object.keys(this.state.sizes).length === 0) {
        return({left: '0', right: '100%'});
      }

      const size = this.state.sizes[this.props.active];

      return({
        left: `${size.left}px`,
        right: `${size.right}px`,
        transition: transitionStyle,
      });
   }

render() {

   return (
      <div className="Tabs" ref={el => this.root = el}>
         {React.Children.map(this.props.children, (child, i) => {
            return (
               <div
                  className={(child.key === this.props.active ? 'Tabs-item Tabs-itemActive' : 'Tabs-item') + (i === 0 ? ' Tabs-first' : i === (this.props.children.length - 1) ? ' Tabs-last' : null)}
                  onClick={() => {
                     this.props.onChange(child.key);
                  }}
                  onMouseEnter={/*something needs to go here, but what?*/}
                  ref={el => this.els[child.key] = el}
               >
                  {child}
               </div>
            );
         })}
         {this.props.underline ?
          // style attribute should be set to this.state.underlineStyle, but it currently an empty object?
            <div key={"Tabs-underline"} className="Tabs-underline" style={this.getUnderlineStyle()}></div>
            : null
         }
      </div>
   );
}
}

export default Tabs;