/* @flow */

import React, { Component, PropTypes } from 'react';
import { Dropdown, DropdownOption } from '../Dropdown';
import { RichUtils } from 'draft-js';
import { changeDepth, getSelectedBlocksType } from 'draftjs-utils';
import Option from '../Option';
import indent from '../../../../images/indent.svg';
import outdent from '../../../../images/outdent.svg';
import ordered from '../../../../images/list-ordered.svg';
import unordered from '../../../../images/list-unordered.svg';
import styles from './styles.css'; // eslint-disable-line no-unused-vars

export default class ListControl extends Component {

  static propTypes = {
    onChange: PropTypes.func.isRequired,
    editorState: PropTypes.object.isRequired,
    inDropdown: PropTypes.bool,
  };

  state: Object = {
    currentBlockType: 'unstyled',
  };

  componentWillMount(): void {
    const { editorState } = this.props;
    if (editorState) {
      this.setState({
        currentBlockType: getSelectedBlocksType(editorState),
      });
    }
  }

  componentWillReceiveProps(properties: Object): void {
    if (properties.editorState &&
      this.props.editorState !== properties.editorState) {
      this.setState({
        currentBlockType: getSelectedBlocksType(properties.editorState),
      });
    }
  }

  _onDropdownChange: Function = (value: string): void => {
    if (value === 'unordered-list-item' || value === 'ordered-list-item') {
      this._toggleBlockType(value);
    } else if (value === 'indent') {
      this._indent();
    } else {
      this._outdent();
    }
  };

  _toggleBlockType: Function = (blockType): void => {
    const { onChange, editorState } = this.props;
    const newState = RichUtils.toggleBlockType(
      editorState,
      blockType
    );
    if (newState) {
      onChange(newState, true);
    }
  };

  _adjustDepth: Function = (adjustment): void => {
    const { onChange, editorState } = this.props;
    const newState = changeDepth(
      editorState,
      adjustment,
      4,
    );
    if (newState) {
      onChange(newState, true);
    }
  };

  _indent: Function = (): void => {
    this._adjustDepth(1);
  };

  _outdent: Function = (): void => {
    this._adjustDepth(-1);
  };

  _renderInFlatList(currentBlockType: string): Object {
    return (
      <div className="list-wrapper">
        <Option
          value="unordered-list-item"
          onClick={this._toggleBlockType}
          active={currentBlockType === 'unordered-list-item'}
        >
          <img
            src={unordered}
            className="list-icon"
            role="presentation"
          />
        </Option>
        <Option
          value="ordered-list-item"
          onClick={this._toggleBlockType}
          active={currentBlockType === 'ordered-list-item'}
        >
          <img
            src={ordered}
            role="presentation"
            className="list-icon"
          />
        </Option>
        <Option
          onClick={this._indent}
        >
          <img
            src={indent}
            role="presentation"
            className="list-icon"
          />
        </Option>
        <Option
          onClick={this._outdent}
        >
          <img
            src={outdent}
            role="presentation"
            className="list-icon"
          />
        </Option>
      </div>
    );
  }

  _renderInDropDown(currentBlockType: string): Object {
    return (
      <Dropdown
        className="list-dropdown"
        onChange={this._onDropdownChange}
      >
        <img
          src={unordered}
          role="presentation"
          className="list-icon"
        />
        <DropdownOption
          value="unordered-list-item"
          className="list-dropdownOption"
          active={currentBlockType === 'unordered-list-item'}
        >
          <img
            src={unordered}
            role="presentation"
            className="list-icon"
          />
        </DropdownOption>
        <DropdownOption
          value="ordered-list-item"
          className="list-dropdownOption"
          active={currentBlockType === 'ordered-list-item'}
        >
          <img
            src={ordered}
            role="presentation"
            className="list-icon"
          />
        </DropdownOption>
        <DropdownOption
          value="indent"
          className="list-dropdownOption"
        >
          <img
            src={indent}
            role="presentation"
            className="list-icon"
          />
        </DropdownOption>
        <DropdownOption
          value="outdent"
          className="list-dropdownOption"
        >
          <img
            src={outdent}
            role="presentation"
            className="list-icon"
          />
        </DropdownOption>
      </Dropdown>
    );
  }

  render(): Object {
    const { inDropdown } = this.props;
    const { currentBlockType } = this.state;
    if (inDropdown) {
      return this._renderInDropDown(currentBlockType);
    }
    return this._renderInFlatList(currentBlockType);
  }
}
