import React from 'react';
import classnames from 'classnames';
import {
  changeFilter,
  changeHeaderSpacing,
  changeTextSize,
  removeTheme,
  changeThemeColor,
  changeThemeTarget,
  addTheme
} from 'actions/feeds';
import Rcslider from 'rc-slider';
import { isPopout } from 'utils/popouts';
import { connect } from 'react-redux';
import FeedSearch from './FeedSearch';
import FeedTheme from './FeedTheme';
import {channelService} from '../../../services/';
import map from 'lodash/map';

class FeedMenu extends React.Component {
    constructor(props) {
      super(props);
    }

    updateSlider(value, name) {
      if (name === 'headerSpacing') {
        changeHeaderSpacing(this.props.widgetId, Number(value), isPopout());
      } else {
        changeTextSize(this.props.widgetId, Number(value), isPopout());
      }
    }

    render() {
      const { widgetId } = this.props;
      return (
        <aside className={classnames('FlyoutMenu', 'feed-menu', {'FlyoutMenu--active': this.props.showMenu})} ref="menu">
          <h3 className="FlyoutMenu-title">Newsfeed Widget Settings</h3>
          <section className="FlyoutMenu-section" key="text">
            <h4 className="FlyoutMenu-subtitle">Text Size</h4>
            <div className="FlyoutMenu-slider feed-menu__text-slider">
              <Rcslider
                className="FlyoutMenu-slider__slider"
                min={11}
                max={16}
                step={0.1}
                value={this.props.textSize}
                onChange={(val) => this.updateSlider(val)}
                tipFormatter={null}
              />
            </div>
          </section>
          <section className="FlyoutMenu-section" key="spacing">
            <h4 className="FlyoutMenu-subtitle">Headline Height</h4>
            <div className="FlyoutMenu-slider feed-menu__space-slider">
              <Rcslider
                className="FlyoutMenu-slider__slider"
                min={0}
                max={8}
                step={0.1}
                value={this.props.headerSpacing}
                onChange={(val) =>  this.updateSlider(val, 'headerSpacing')}
                tipFormatter={null}
              />
            </div>
          </section>
          <section className="FlyoutMenu-section" key="theme">
            <h4 className="FlyoutMenu-subtitle">Headline Themes</h4>
            <ul className="feed-menu__themes">
            {map(this.props.themes, (v, k) => <FeedTheme theme={v}
                                                           index={k}
                                                           key={k}
                                                           removeTheme={(themeId) =>
                                                             removeTheme(widgetId, themeId, isPopout())}
                                                           changeThemeColor={(themeId, hue) =>
                                                             changeThemeColor(widgetId, themeId, hue, isPopout())}
                                                           changeThemeTarget={(themeId, target, category) =>
                                                             changeThemeTarget(widgetId, themeId, target, category, isPopout())}/>)}
            </ul>
            <button className="feed-theme__add" onClick={() => addTheme(widgetId, isPopout())}>Add Theme</button>
          </section>
        </aside>
      );
    }
}

FeedMenu.propTypes = {
  showMenu: React.PropTypes.bool,
  widgetId: React.PropTypes.number,
  headerSpacing: React.PropTypes.number,
  textSize: React.PropTypes.number,
  themes: React.PropTypes.array
};

export default FeedMenu;