import React from 'react';
import { connect } from 'react-redux';
import SortDropdown from '../Filters/SortDropdown';
import { numberWithCommas } from 'App/utils';
import SelectDateRange from 'Shared/SelectDateRange';
import { applyFilter } from 'Duck/search';
import Period from 'Types/app/period';

const sortOptionsMap = {
  'startTs-desc': 'Newest',
  'startTs-asc': 'Oldest',
  'eventsCount-asc': 'Events Ascending',
  'eventsCount-desc': 'Events Descending',
};
const sortOptions = Object.entries(sortOptionsMap)
  .map(([ value, label ]) => ({ value, label }));


function SessionListHeader({
  activeTab,
  count,
  applyFilter,
  filter,
}) {
  const { startDate, endDate, rangeValue } = filter;
  const period = new Period({ start: startDate, end: endDate, rangeName: rangeValue });

  const onDateChange = (e) => {
    const dateValues = e.toJSON();
    applyFilter(dateValues);
  };
  return (
    <div className="flex mb-6 justify-between items-end">
      <div className="flex items-baseline">
        <h3 className="text-2xl capitalize">
          <span>{ activeTab.name }</span>
          <span className="ml-2 font-normal color-gray-medium">{ count ? numberWithCommas(count) : 0 }</span>
        </h3>
        { activeTab.type !== 'bookmark' && (
          <div className="ml-3 flex items-center">
            <span className="mr-2 color-gray-medium">Sessions Captured in</span>
            <SelectDateRange
                period={period}
                onChange={onDateChange}
            />
          </div>
        )}
      </div>
      <div className="flex items-center">
        <div className="flex items-center ml-6">
          <span className="mr-2 color-gray-medium">Sort By</span>
          <SortDropdown options={ sortOptions }/>
        </div>
      </div>
    </div>
  );
};

export default connect(state => ({
  activeTab: state.getIn([ 'search', 'activeTab' ]),
  period: state.getIn([ 'search', 'period' ]),
  filter: state.getIn([ 'search', 'instance' ]),
}), { applyFilter })(SessionListHeader);