import React from 'react';
import { connect } from 'react-redux';

import classnames from 'classnames';
import { toggleDisplay } from 'actions/securities';
import { changeCalendarColumns } from 'actions/calendars';
import { calendarFields } from 'utils/calendar';

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

  toggleField(fieldKey) {
    const { displayOptions, calendarType, widgetId, dispatch } = this.props;
    const { colHidden } = displayOptions;

    if (colHidden[calendarType][fieldKey]) {
      delete colHidden[calendarType][fieldKey];
    } else {
      colHidden[calendarType][fieldKey] = true;
    }

    dispatch(changeCalendarColumns(widgetId, displayOptions, colHidden));

    bzTrack.track('Calendar Menu: Toggle', {
      column: fieldKey
    });
  }

  render() {
    const { displayOptions, calendarType, showMenu } = this.props;
    const { colHidden } = displayOptions;

    const fields = calendarFields(calendarType);
    const fieldKeys = Object.keys(fields);

    return (
      <aside className={classnames('FlyoutMenu', 'Calendar-menu', {'FlyoutMenu--active': showMenu})} ref="menu">
        <h3 className="FlyoutMenu-title">Calendar Widget Settings</h3>
        <section className="FlyoutMenu-section">
          <h4 className="FlyoutMenu-subtitle">Displayed Columns</h4>
          {fieldKeys.map((fieldKey) => {
            const isFieldHidden = colHidden[calendarType][fieldKey];

            return (
              <div className="FlyoutMenu-display" key={fieldKey}>
                <label className="FlyoutMenu-display__label">{fields[fieldKey].listNameFull}</label>
                <div
                  className={classnames('FlyoutMenu-display__toggle', {active: !isFieldHidden })}
                  onClick={() => this.toggleField(fieldKey)}
                />
              </div>
            );
          })}
        </section>
      </aside>
    );
  }
}

CalendarMenu.propTypes = {
  showMenu: React.PropTypes.bool,
  widgetId: React.PropTypes.number,

  calendarType: React.PropTypes.string.isRequired,
  displayOptions: React.PropTypes.object.isRequired,

  dispatch: React.PropTypes.func,
};

export default connect()(CalendarMenu);