import React, { Fragment } from 'react';
import { Select, Text } from '@bufferapp/ui';
import StatefulDropdown from './Dropdown';

export default class MetricDropdown extends StatefulDropdown {
  render() {
    const metrics = [{
      id: 0,
      title: 'Date',
      key: 'date',
      selected: this.props.attributeToSortBy === 'date',
    }, {
      title: 'Completion Rate',
      key: 'completionRate',
      selected: this.props.attributeToSortBy === 'completionRate',
    }, {
      title: 'Reach',
      key: 'reach',
      selected: this.props.attributeToSortBy === 'reach',
    }];

    const selectedMetric = metrics.find(metric => metric.key === this.props.attributeToSortBy);
    return (
      <Fragment>
        <Text htmlFor="days_select" type="label" >Sort by</Text>
        <Select
          label={selectedMetric.title}
          items={metrics}
          xPosition="right"
          multiSelect={false}
          onSelectClick={item => this.props.sortBy(item.key)}
        />
      </Fragment>
    );
  }
}