import React from 'react';
import PropTypes from 'prop-types';

import { Text } from '@bufferapp/components';
import ChevronDownIcon from '@bufferapp/ui/Icon/Icons/ChevronDown';

import Dropdown, {
  DropdownContent,
} from '@bufferapp/analyze-shared-components/Dropdown';

import List from './List';
import ColorIcon from '../ColorIcon';

const triggerContainer = {
  padding: '5px 0',
  display: 'flex',
  alignItems: 'center',
  width: '100%',
};

const dropdown = {
  width: '16rem',
  display: 'inline-block',
};

const MetricDropdown =
  ({ metrics, open, selectedMetricData, toggleDropdown, selectMetric }) => (
    <div style={dropdown}>
      <Dropdown toggleDropdown={toggleDropdown} isDropdownOpen={open}>
        <div style={triggerContainer}>
          <ColorIcon metric={selectedMetricData.label} circle />
          <Text weight="medium" size="small" color="outerSpace">{selectedMetricData.label}</Text>
          <span style={{ marginLeft: 'auto' }} >
            <ChevronDownIcon />
          </span>
        </div>
        <DropdownContent isDropdownOpen={open}>
          <List
            metrics={metrics}
            selectedMetricData={selectedMetricData}
            selectMetric={selectMetric}
          />
        </DropdownContent>
      </Dropdown>
    </div>
  );

MetricDropdown.defaultProps = {
  metrics: [],
  open: false
};

MetricDropdown.propTypes = {
  open: PropTypes.bool,
  selectedMetricData: PropTypes.shape({
    label: PropTypes.string,
    hourlyMetrics: PropTypes.arrayOf(PropTypes.number),
  }).isRequired,
  selectMetric: PropTypes.func.isRequired,
  toggleDropdown: PropTypes.func.isRequired,
  metrics: PropTypes.arrayOf(PropTypes.shape({
    label: PropTypes.string,
    hourlyMetrics: PropTypes.arrayOf(PropTypes.number),
  })),
};
export default MetricDropdown;