import React from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import styled from 'styled-components';
import DatePickerHeader from './header/DatePickerHeader';

interface Props {
  date: Date | undefined;
  onSelect: (newDate: Date) => void;
  type: string;
  maxStartDate?: Date;
  from: Date;
  children?: React.ReactNode;
}

function CustomDatePicker({
  date,
  onSelect,
  children,

  type,
  maxStartDate,
  from,
}: Props) {

  return (
    <Container>
      {type === 'till' && (
        <DatePicker
          children={<div>{children}</div>}
          inline
          disabledKeyboardNavigation
          showMonthDropdown
          showPopperArrow={false}
          selected={date}
          maxDate={maxStartDate ? maxStartDate : new Date()}
          minDate={from}
          onChange={(date: Date) => onSelect(date)}
          renderCustomHeader={props => <DatePickerHeader {...props} />}
        />
      )}
      {type === 'from' && (
        <DatePicker
          children={<div>{children}</div>}
          inline
          showMonthDropdown
          disabledKeyboardNavigation
          showPopperArrow={false}
          selected={date}
          maxDate={maxStartDate ? maxStartDate : new Date()}
          onChange={(date: Date) => onSelect(date)}
          renderCustomHeader={props => <DatePickerHeader {...props} />}
        />
      )}
    </Container>
  );
}

const Container = styled.div`
  .react-datepicker__current-month {
    font-weight: 500;
    font-size: 18px;
    color: white;
  }
  .react-datepicker__header {
    background: none;
    display: flex;
    flex-direction: column;
    border-bottom: none;
  }
  .react-datepicker {
    padding: 0 30px;
    border: none;
    background: #1b2020 0% 0% no-repeat padding-box;
    /* box-shadow: 0px 0px 30px #4158a266; */
    border-radius: 10px;
  }

  .react-datepicker__day-names {
    display: flex;
    justify-content: space-between;
    max-width: 390px;
    margin-left: 15px; //Magic values to align
  }
  .react-datepicker__day-name {
    color: rgba(255, 255, 255, 0.5);
    font-weight: bold;
    font-size: 13px;
  }

  .react-datepicker__day {
    font-size: 18px;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .react-datepicker__day:hover {
    background: transparent linear-gradient(137deg, #55f5df 0%, #55d0f5 100%) 0%
      0% no-repeat padding-box;
    border-radius: 50%;
  }
  .react-datepicker__day,
  .react-datepicker__time-name {
    color: white;
  }

  .react-datepicker__week {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  .react-datepicker__day--keyboard-selected {
    background: transparent linear-gradient(137deg, #55f5df 0%, #55d0f5 100%) 0%
      0% no-repeat padding-box;
    border-radius: 50%;
    color: black;
    font-size: 18px;
    font-weight: bold;
  }
  .react-datepicker__day--today {
    color: #6396e5;
    font-weight: normal;
  }
  .react-datepicker__day--selected {
    background: transparent linear-gradient(137deg, #55f5df 0%, #55d0f5 100%) 0%
      0% no-repeat padding-box;
    border-radius: 50%;
    color: black;
    font-size: 18px;
    font-weight: bold;
  }
  .react-datepicker__day--disabled {
    opacity: 0.5;
    background: transparent;
    color: #fff;
  }
`;
export default styled(CustomDatePicker)``;
