/**
 * Created by easub on 2017/2/16.
 */

import React from 'react';
import { merge } from 'lodash';
import styled from 'styled-components';
import { RaisedButton } from 'material-ui';

import EffectComponents from 'components/EffectsComponents';
import EditContent from './EditContent';

const Content = styled.div`
  margin: 0 auto;
  padding-top: 10px;
  width: 852px;
`;

const ActionContent = styled.div`
  display: flex;
  flex-direction: row-reverse;
  margin-top: 10px;
`;

const EditP = styled.p`
  z-index: 1;
  position: absolute;
  font-family: sans-serif;
  text-align: center;
  overflow: hidden;
  top: ${(props) => `${props.top}px`};
  left: ${(props) => `${props.left}px`};
  width: ${(props) => `${props.width}px`};
  height: ${(props) => `${props.height}px`};
  color: ${(props) => `${props.color}`};
  font-size: ${(props) => `${props.fontSize}px`};
  font-style: ${(props) => `${props.fontI === 1 ? 'italic' : 'normal'}`};
  font-weight: ${(props) => `${props.fontB === 1 ? 'bolder' : 'normal'}`};
  background: ${(props) => `rgba(${props.r},${props.g},${props.b},${props.bacColorAlpha})`};
`;

export default class EffectsComPage extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function

  state = {
    topLeft: { x: 0, y: 0 },
    topRight: { x: 200, y: 0 },
    bottomLeft: { x: 0, y: 100 },
    bottomRight: { x: 200, y: 100 },

    editFlag: false,
    stateEdit: {
      start: 0,
      end: 5,
      value: '',
      fontSize: 14,
      fontAlpha: 1,
      color: '#444',
      bacColor: [0, 0, 0],
      bacColorAlpha: 0,
      fontB: 0,
      fontI: 0,
      locationX: 0,
      locationY: 0,
    },
  };

  initData = () => {
    this.setState({
      topLeft: { x: 0, y: 0 },
      topRight: { x: 200, y: 0 },
      bottomLeft: { x: 0, y: 100 },
      bottomRight: { x: 200, y: 100 },
      stateEdit: {
        start: 0,
        end: 5,
        value: '',
        fontSize: 14,
        fontAlpha: 1,
        color: '#444',
        bacColor: [0, 0, 0],
        bacColorAlpha: 0,
        fontB: 0,
        fontI: 0,
        locationX: 0,
        locationY: 0,
      },
    });
  };

  handleChangePosition = (topLeft, topRight, bottomLeft, bottomRight) => {
    this.setState({
      topLeft: merge({}, topLeft),
      topRight: merge({}, topRight),
      bottomLeft: merge({}, bottomLeft),
      bottomRight: merge({}, bottomRight),
    });
  };

  handleSave = () => {

  };

  handleChangeEditObj = (obj) => {
    const stateEdit = merge({}, this.state.stateEdit, obj);
    this.setState({ stateEdit });
  }

  handleChangeEditPositionX = (obj) => {
    const { topLeft } = this.state;
    const diffX = obj.x - topLeft.x;
    const topRight = merge({}, this.state.topRight);
    const bottomRight = merge({}, this.state.bottomRight);
    topRight.x = topRight.x + diffX;
    bottomRight.x = bottomRight.x + diffX;
    const setTopLeft = merge({}, this.state.topLeft, obj);
    const setbottomLeft = merge({}, this.state.bottomLeft, obj);
    this.setState({ topLeft: setTopLeft, topRight, bottomLeft: setbottomLeft, bottomRight });
  }

  handleChangeEditPositionY = (obj) => {
    const { topLeft } = this.state;
    const diffY = obj.y - topLeft.y;
    const bottomLeft = merge({}, this.state.bottomLeft);
    const bottomRight = merge({}, this.state.bottomRight);
    bottomLeft.y = bottomLeft.y + diffY;
    bottomRight.y = bottomRight.y + diffY;

    const setTopLeft = merge({}, this.state.topLeft, obj);
    const setTopRight = merge({}, this.state.topRight, obj);
    this.setState({ topLeft: setTopLeft, topRight: setTopRight, bottomLeft, bottomRight });
  }

  handleAdd = () => {
    const objInfo = {
      start: 0,
      end: 5,
      value: '',
      fontSize: 14,
      fontAlpha: 100,
      color: '#444444',
      fontB: 0,
      fontI: 0,
      bacColor: [0, 0, 0],
      bacColorAlpha: 0,
    };
    // this.initData();
    this.setState({ stateEdit: objInfo, editFlag: true });
  };

  // 边框 -2 -4 +1 （内边距2px 宽度4 虚线边框1）
  render() {
    const { topLeft, topRight, bottomLeft, bottomRight, editFlag, stateEdit } = this.state;

    return (
      <Content>
        <div>
          {`x:${topLeft.x};
          y:${topLeft.y};
          width:${Math.max(topRight.x - topLeft.x, bottomRight.x - bottomLeft.x)};
          height:${Math.max(bottomLeft.y - topLeft.y, bottomRight.y - topRight.y)}`}
        </div>
        <div id="drawContent" style={{ width: '852px', height: '480px', position: 'relative' }}>
          <video
            controls
            ref={(c) => { this.video = c; }}
            id="video" src="http://video.clip.easub.com/vod-out/hd/0eddc32c-5933-4a4f-a5f5-42b45473c977.mp4"
            style={{ width: '852px', height: '480px', display: 'block', backgroundColor: '#000' }}
          />
          <div style={{ zIndex: 2, position: 'absolute', top: '0', width: '100%', height: '100%', display: editFlag ? 'block' : 'none' }}>
            <EffectComponents
              changePosition={this.handleChangePosition}
              topLeft={topLeft}
              topRight={topRight}
              bottomLeft={bottomLeft}
              bottomRight={bottomRight}
              parentsId={'drawContent'}
            />
          </div>
          <EditP
            top={topLeft.y}
            left={topLeft.x}
            width={Math.max(topRight.x - topLeft.x, bottomRight.x - bottomLeft.x)}
            height={Math.max(bottomLeft.y - topLeft.y, bottomRight.y - topRight.y)}
            color={stateEdit.color}
            fontSize={stateEdit.fontSize}
            fontI={stateEdit.fontI}
            fontB={stateEdit.fontB}
            r={stateEdit.bacColor[0]}
            g={stateEdit.bacColor[1]}
            b={stateEdit.bacColor[2]}
            bacColorAlpha={stateEdit.bacColorAlpha}
          >
            {stateEdit.value}
          </EditP>
        </div>
        {
          editFlag ?
            <EditContent
              objInfo={stateEdit}
              changeObj={this.handleChangeEditObj}
              changePositionX={this.handleChangeEditPositionX}
              changePositionY={this.handleChangeEditPositionY}
              positionX={topLeft.x}
              positionY={topLeft.y}
            />
            :
              <ActionContent>
                <RaisedButton
                  label={'保存'}
                  backgroundColor="#108fe9"
                  labelColor="#fff"
                  style={{ marginLeft: '20px' }}
                  onTouchTap={this.handleSave}
                />
                <RaisedButton
                  label={'添加'}
                  backgroundColor="#108fe9"
                  labelColor="#fff"
                  onTouchTap={this.handleAdd}
                />
              </ActionContent>
        }
      </Content>
    );
  }
}
