import React from 'react';
import map from 'lodash/map';
import classnames from 'classnames';
import Rcslider from 'rc-slider';
import { channelService } from '../../../services/';
import {hueToColor} from 'utils/html';

export default class FeedTheme extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showColorPicker: false,
      showSubjects: false,
      channels: channelService.getAllChannels(),
      sources: channelService.getContentTypes()
    };
  }

  toggleColorPicker(bool) {
    this.setState({showColorPicker: bool});
  }
  toggleSubjects() {
    this.setState({showSubjects: !this.state.showSubjects});
  }
  colorFromHue(hue) {
    return hueToColor(hue);
  }

  render() {
    return (
      <li key={this.props.index} className="feed-theme">
        <div className="feed-theme__subject" onClick={() => this.toggleSubjects()}>
          {this.props.theme.target ? this.props.theme.target.name || this.props.theme.target.channel : 'Select a source/channel for this theme...'}
          <ul className={classnames('feed-theme__subject-list', {open: this.state.showSubjects})} onClick={() => this.toggleSubjects()}>
            <li className="feed-theme__subject-category">Sources</li>
            {map(this.state.sources, (v, k) => <li className="feed-theme__subject-item" key={k} onClick={() => this.props.changeThemeTarget(this.props.index, v, 'source')}>{v.name}</li>)}
            <li className="feed-theme__subject-category">Categories</li>
            {map(this.state.channels, (v, k) => <li className="feed-theme__subject-item" key={k} onClick={() => this.props.changeThemeTarget(this.props.index, v, 'channel')}>{v.name}</li>)}
          </ul>
        </div>
        <div className="feed-theme__color" style={{background: this.colorFromHue(this.props.theme.hue)}} onClick={() => this.toggleColorPicker(true)}>
          Aa
        </div>
        <div className={classnames('feed-theme__colorpicker', {open: this.state.showColorPicker})}>
          <Rcslider
            min={0}
            max={360}
            value={this.props.theme.hue || 100}
            onChange={(val) => this.props.changeThemeColor(this.props.index, val)}
            onAfterChange={() => this.toggleColorPicker(false)}
            tipFormatter={null}
          />
        </div>
        <div className="feed-theme__closepicker" onClick={() => this.toggleColorPicker(false)}></div>
        <div className="feed-theme__remove" onClick={() => this.props.removeTheme(this.props.index)}><i className="bzpro-icon-close"></i></div>
      </li>
    );
  }
}

FeedTheme.propTypes = {
  theme: React.PropTypes.object,
  index: React.PropTypes.number,
  removeTheme: React.PropTypes.func,
  changeThemeColor: React.PropTypes.func,
  changeThemeTarget: React.PropTypes.func
};