import React from "react";
import PropTypes from 'prop-types';
import ChartTitle from "../ChartTitle";
import Select from "@bufferapp/ui/Select";
import styled, { css } from "styled-components";
import ChevronDownIcon from '@bufferapp/ui/Icon/Icons/ChevronDown';
import { blue } from '@bufferapp/ui/style/colors';

const VariableText = styled.div`
  border-bottom: ${props => (props.forReport ? "none" : "2px solid #000000")};
  display: flex;
  align-items: center;

  ${props =>
    !props.forReport &&
    css`
      :hover {
        color: ${blue};
        border-bottom: 2px solid ${blue};
        cursor: pointer;

        svg {
          fill: ${blue};
        }
      }
    `}
`;

class TitleDropdown extends React.Component {
  renderSelector = onButtonClick => {
    const lowercasedMetric = this.props.selectedMetric.toLowerCase();
    return (
      <VariableText onClick={onButtonClick}>
        {lowercasedMetric}
        <ChevronDownIcon />
      </VariableText>
    );
  };

  render() {
    const { loading, forReport, items, selectedMetric, children } = this.props;
    if (forReport || loading) {
      const lowercasedMetric = selectedMetric.toLowerCase();
      return (
        <ChartTitle>
          {children}{" "}
          <VariableText forReport={forReport}>{lowercasedMetric}</VariableText>
        </ChartTitle>
      );
    } else {
      return (
        <ChartTitle>
          {children}{" "}
          <Select
            customButton={onButtonClick => this.renderSelector(onButtonClick)}
            items={items}
            hideSearch
            onSelectClick={selectedItem => selectedItem.onItemClick()}
          />
        </ChartTitle>
      );
    }
  }
}

TitleDropdown.propTypes = {
  forReport: PropTypes.bool,
  loading: PropTypes.bool,
  selectedMetric: PropTypes.string
};

TitleDropdown.defaultProps = {
  forReport: false,
  loading: true,
  selectedMetric: 'Visitors'
};

export default TitleDropdown;