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

import DayDropdown from './Day';
import MetricDropdown from './Metric';

const Wrapper = styled.section`
  display: flex;
  padding: 0 16px;
  align-items: center;
  justify-content: space-between;
`;

const Container = styled.section`
  display: flex;
  align-items: center;
  justify-content: space-between;

  > *:nth-child(1) {
    margin-right: .5rem;
  }
`;
class Dropdowns extends React.Component {
  static propTypes = {
    sortBy: PropTypes.func.isRequired,
  };

  constructor(props) {
    super(props);
    this.state = {
      isMetricDropdownOpen: false,
    };
    this.openMetricsDropdown = this.openMetricsDropdown.bind(this);
    this.closeMetricsDropdown = this.closeMetricsDropdown.bind(this);
  }

  openMetricsDropdown() {
    this.setState({
      isMetricDropdownOpen: true,
    });
  }
  closeMetricsDropdown() {
    this.setState({
      isMetricDropdownOpen: false,
    });
  }

  render() {
    return (
      <Wrapper>
        <Container>
         <DayDropdown
            selectedDay={this.props.selectedDay}
            filterBy={this.props.filterBy}
            dates={this.props.dates}
          />
        </Container>
        <Container>
          <MetricDropdown
            sortBy={this.props.sortBy}
            attributeToSortBy={this.props.attributeToSortBy}
          />
        </Container>
      </Wrapper>
    );
  }
}

export default Dropdowns;