/*
* @Author: zhouningyi
* @Date: 2016-12-26 11:55:57
*/

import React, { Component, PropTypes } from 'react';
import './index.css';
import Utils from './../../../lib/utils';
import UiBase from './../../uiBase';

const translate   = (x, y) => `translate(${x}%, ${y}%)`;
const translatePX = (x, y) => `translate(${x}px, ${y}px)`;

const getOrAddId = (container) => {
  if(!container) return;
  let id = container.getAttribute('id');
  if(id) return id;
  id = 'id_' + Math.floor(Math.random() * 100000)
  container.getAttribute('id', id);
  return id;
}

const getDirection = type => {
  return {
    top:   'column',
    left:  'row',
    right: 'row-reverse',
    bottom:'column-reverse'
  }[type];
};

const defaultProps = {
  heightTriangle: 7,
  direction: 'top',
};

const getTriangleStyle = (type, w, style) => {
  const color = style.background || 'rgba(10,10,10,1)';
  const stls = {
    top:    {
      borderWidth: `${w}px ${w}px 0 ${w}px`,
      borderColor:  `${color} transparent transparent transparent`
    },
    bottom: {
      borderWidth: `0 ${w}px ${w}px ${w}px`,
      borderColor: `transparent transparent ${color} transparent`
    },
    left:   {
      borderWidth: `${w}px 0 ${w}px ${w}px`,
      borderColor: `transparent transparent transparent ${color}`
    },
    right:  {
      borderWidth: `${w}px ${w}px ${w}px 0`,
      borderColor: `transparent ${color} transparent transparent`
    },
  };
  return stls[type];
};


const defaultStyle = {
  main: {
    background: 'rgba(10, 10, 10, 1)'
  },
  triangle: {
    background: 'rgba(10, 10, 10, 1)'
  }
};


export function getStyles(props, context) {
  const style = props.style || {};
  const {background} = style;
  const styleNew = {
    main: {
      background
    },
    triangle: {
      background
    }
  };
  return Utils.deepMerge(defaultStyle, styleNew);
}

export default class FloatTag extends Component {
  static propTypes = {
    onChange:       PropTypes.func,
    onFinishChange: PropTypes.func,
    isActive:       PropTypes.bool,
    primaryText:    PropTypes.any,
    direction:      PropTypes.string,
    component:      PropTypes.any,
    offset:         PropTypes.number
  }
  constructor(props: any) {
    super(props);
  }
  static contextTypes = {
    muiTheme: PropTypes.object.isRequired,
  }
  _getFloatTagStyle(){
    const posStyle = this._computePosition();
    return Object.assign({}, posStyle, this.props.style);
  }
  _getContentContainerStyle(){
    const direction = this.props.direction || defaultProps.direction;
    const transforms = {
      top:    translate(0, 0),
      bottom: translate(0, 100),
      left:   translate(-50, 50),
      right:  translate(50, 50)
    };
    const transform = transforms[direction];
    return {
      flexDirection: getDirection(direction),
      transform
    };
  }
  _computePosition(){
    let {component, offset} = this.props;
    const direction = this.props.direction || defaultProps.direction;
    offset = offset || 5;
    if (!component) return {};
    const left   = component.offsetLeft,  top    = component.offsetTop;
    const width  = component.offsetWidth, height = component.offsetHeight;
    console.log(left, top, width, height);
    const posMap = {
      left: {
        transform: translatePX(- width / 2 - offset, 0),
      },
      top: {
        transform: translatePX(left + width / 2 , - height / 2 - offset)
      },
      bottom: {
        transform: translatePX(0, height / 2 + offset)
      },
      right: {
        transform: translatePX(width / 2 + offset, 0)
      }
    };
    const id = getOrAddId(component);
    return Object.assign(posMap[direction] || {}, {
      position: `element(#${id})`
    });
  }
  _genChildren = () => {
    const {children} = this.props;
    if(children === null || children === undefined) return null;
    if(typeof(children) === 'number') return Utils.numberFormater(children);
    if(typeof(children) === 'string') return children;
    return React.Children.map(children, child => React.cloneElement(child, {}));
  }
  render(){
    let {isActive, primaryText} = this.props;
    const direction = this.props.direction || defaultProps.direction;
    const heightTriangle = this.props.heightTriangle || defaultProps.heightTriangle;
    const style = this._getFloatTagStyle();
    const className = isActive ? "z_float-tag-container z_float-tag-active": "z_float-tag-container z_float-tag-normal";
    const children = this._genChildren();
    const styles = getStyles(this.props, this.context);
    return (
      <div 
        className={className}
        style={style}
      > 
        <div 
          className="z_float-tag-content-wapper-container"
        >
          <div 
            className="z_float-tag-content-container"
            style={this._getContentContainerStyle()}
          >
            <div 
              className="z_float-tag-text-container"
              style={styles.main}
            >
              {children}
            </div>
            <div 
              className="z_float-tag-triangle"
              style={getTriangleStyle(direction, heightTriangle, styles.triangle)}
            />
          </div>
        </div>
      </div>
    );
  }
}