import React from 'react';
import styled from 'styled-components';
import { DatePicker as DatePickerComponent } from 'react-date-picker';

export type DatePickerProps = React.ComponentProps<typeof DatePickerComponent>;

export const DatePicker = (props: DatePickerProps) => {
  return (
    <DatePickerWrapper data-component-name="DatePicker/DatePicker">
      <DatePickerComponent {...props} />
    </DatePickerWrapper>
  );
};

const DatePickerWrapper = styled.div`
  display: flex;
  flex: 1;
  button {
    color: var(--date-picker-nav-color);
  }

  .react-date-picker {
    flex: 1;
  }

  .react-calendar__tile--now {
    background: var(--date-picker-tile-bg-color);
    color: var(--date-picker-tile-color);

    &:enabled:hover,
    &:enabled:focus {
      background: var(--date-picker-tile-bg-color-hover);
      color: var(--date-picker-tile-color-hover);
    }
  }

  .react-date-picker__inputGroup__input {
    width: var(--date-picker-input-width);

    &:invalid {
      background: var(--date-picker-invalid-input-bg-color);
    }
  }

  .react-date-picker__button {
    padding: var(--date-picker-button-padding);

    svg {
      stroke: var(--date-picker-icon-stroke);
      width: var(--date-picker-icon-width);
    }

    &:enabled:hover .react-date-picker__button__icon {
      stroke: var(--date-picker-icon-stroke-hover);
    }
  }

  .react-calendar__month-view__days__day--weekend:disabled,
  .react-calendar__month-view__days__day--weekend {
    color: var(--date-picker-weekend-days-color);
  }
  .react-calendar__month-view__days__day--neighboringMonth {
    color: var(--date-picker-week-days-color);
  }
  .react-calendar__month-view__weekdays__weekday {
    color: var(--date-picker-neighboring-month-color);
  }

  .react-date-picker__wrapper {
    border: 1px solid var(--date-picker-wrapper-border-color);
    border-radius: var(--date-picker-wrapper-radius);
    padding: var(--date-picker-wrapper-padding);
  }
`;