import React from 'react';
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';
import ChevronDownIcon from '@bufferapp/ui/Icon/Icons/ChevronDown';
import Title from './Title';
import { gray, grayDark } from '@bufferapp/ui/style/colors';
import {
  fontFamily,
  fontSize,
  lineHeight,
  fontWeight,
} from "@bufferapp/ui/style/fonts";

const Button = styled.button`
  cursor: pointer;
  display: flex;
  padding: 0.75rem 1rem;
  color: ${grayDark};
  text-decoration: none;
  text-shadow: none;
  text-align: left;
  border: 1px solid ${gray};
  border-radius: 4px;
  background: #fff;
  width: 100%;
  height:40px;
  box-sizing: border-box;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
  font-family: ${fontFamily};
  font-weight: 500;
  font-size: 14px;
  line-height: ${lineHeight};

  outline: none !important;
  outline-color: transparent !important;
  outline-style: none !important;

  transition: all 0.2s ease-out;
  &:hover { 
    border-color: ${grayDark};
  }
  &:active {
    border-color: ${grayDark};
  }

  ${props => props.loading && css`
    pointer-events: none;
  `}
`;

const Arrow = styled.span`
  margin-left: auto;
`;

const DatePickerButton = ({ presets, isOpen, loading, startDate, endDate, handleClick }) => (
  <Button
    loading={loading}
    disabled={loading}
    onClick={handleClick}
  >
    <Title presets={presets} loading={loading} startDate={startDate} endDate={endDate} />
    { !loading ?
      <Arrow>
        <ChevronDownIcon />
      </Arrow> : null}
  </Button>
);

DatePickerButton.defaultProps = {
  startDate: 0,
  endDate: 0,
  loading: false,
};

DatePickerButton.propTypes = {
  isOpen: PropTypes.bool.isRequired,
  handleClick: PropTypes.func.isRequired,
  loading: PropTypes.bool,
  startDate: PropTypes.number,
  endDate: PropTypes.number,
};

export default DatePickerButton;