import React, { Component, Fragment } from 'react';
import dayjs from 'dayjs';
import { Select, Text } from '@bufferapp/ui';
import { ALL_DAYS } from '../../reducer';

class DayDropdown extends Component {
  render() {
    const allDaysCopy = 'All Stories';
    const dateFormat = 'dddd[,] MMMM D';
    const label = this.props.selectedDay === ALL_DAYS ? allDaysCopy : dayjs(this.props.selectedDay).format(dateFormat);
    const items = [
      {
        id: '0',
        title: allDaysCopy,
        value: ALL_DAYS,
        selected: this.props.selectedDay === ALL_DAYS,
      },
      ...this.props.dates.map((day, index) => {
        return ({
          id: index + 1,
          title: dayjs(day).format(dateFormat),
          value: day,
          selected: this.props.selectedDay === day,
        })
      }),
    ];

    return (
      <Fragment>
        <Text type="label">Show</Text>
        <Select
          label={label}
          items={items}
          multiSelect={false}
          onSelectClick={item => this.props.filterBy(item.value)}
        />
      </Fragment>
    );
  }
}

export default DayDropdown;