import React from 'react';
import DropdownMenu from 'components/ui/inputs/DropdownMenu';
import DatePicker from './DatePicker';
import SymbolAutocomplete from '../../search/SymbolAutocomplete';
import CheckboxSelectorDropdown from 'components/ui/inputs/CheckboxSelectorDropdown';
import { calendarNames } from 'utils/calendar';
import {
  loadNewCalendarType,
  loadNewCalendarDates,
  loadNewCalendarSymbol,
  freezeCalendarColumns,
} from 'actions/calendars';

export default class CalendarHeader extends React.Component {

  changeFrozen(newFields) {
    const { fields, displayOptions, parameters, id, dispatch } = this.props;
    const { colFrozen = {} } = displayOptions;
    const { calendarType } = parameters;

    colFrozen[calendarType] = {};
    Object.keys(fields).forEach((columnKey) => {
      if (newFields.includes(columnKey)) {
        colFrozen[calendarType][columnKey] = true;
      }
    });
    dispatch(
      freezeCalendarColumns(id, displayOptions, colFrozen)
    );
  }

  searchChanged(searchTerm) {
    const { id, parameters, dispatch } = this.props;
    if (searchTerm === '') {
      dispatch(
        loadNewCalendarSymbol(id, parameters, null)
      );
    }
  }

  clearSearch(clearSearchCallback) {
    const { id, parameters, dispatch } = this.props;
    dispatch(
      loadNewCalendarSymbol(id, parameters, null)
    );
    clearSearchCallback();
  }

  switchType(newType) {
    const { parameters, id, dispatch } = this.props;
    if (newType === 'economics') {
      this.clearSearch();
      parameters.symbol = null;
    }
    dispatch(loadNewCalendarType(id, parameters, newType));
  }

  render() {
    const { parameters, displayOptions, fields, id, dispatch } = this.props;
    const { calendarType, dateStart, dateEnd, symbol } = parameters;
    const { colFrozen } = displayOptions;

    // Get a list of all the fields that are set to be displayed
    const allFields = Object.keys(fields).map(key => Object.assign({}, fields[key], {columnKey: key}));
    const frozenFields = allFields.filter((field) => colFrozen[calendarType][field.columnKey]).map((field) => field.columnKey);

    let symbolPlaceholder = 'Search by symbol or security name...';
    if (symbol) {
      symbolPlaceholder = symbol;
    }

    return (
      <div className="Calendar-header">
        <div className="Calendar-filters">
          <div className="Search WidgetSearch">
            <SymbolAutocomplete
              symbol={symbol}
              keepOnCompletion
              bindClearSearchCallback={(clearSearchCallback) => this.clearSearch = this.clearSearch.bind(this, clearSearchCallback)}
              onSelect={(newSymbol) => dispatch(loadNewCalendarSymbol(id, parameters, newSymbol.value))}
              onChange={(event, searchTerm) => this.searchChanged(searchTerm)}
              placeholder={symbolPlaceholder}
            />
            <button className="WidgetSearch-btn WidgetSearch-btn--text" onClick={this.clearSearch}>Reset Filters</button>
            <DatePicker
              dateStart={dateStart}
              dateEnd={dateEnd}
              onChange={(newStart, newEnd) => dispatch(loadNewCalendarDates(id, parameters, newStart, newEnd))}
            />
            <DropdownMenu
              items={calendarNames()}
              value={calendarType}
              onChange={(newType) => this.switchType(newType)}
              defaultText="Select a Calendar.."
            />
          </div>
        </div>
      </div>
    );
  }
}

// <CheckboxSelectorDropdown
//   collectionName="Locked"
//   noneSelectedText="None"
//   sources={allFields}
//   selectedList={frozenFields}
//   getId={(field) => field.columnKey}
//   getValue={(field) => field.listName}
//   onChange={(newFields) => this.changeFrozen(newFields)}
//   noPluralForm
// />

CalendarHeader.propTypes = {
  id: React.PropTypes.number,
  parameters: React.PropTypes.object.isRequired,
  displayOptions: React.PropTypes.object.isRequired,
  fields: React.PropTypes.object.isRequired,
  dispatch: React.PropTypes.func.isRequired
};