import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { default as ReactDatePicker } from 'react-datepicker';
import classnames from 'classnames/bind';
import nl from 'date-fns/locale/nl';
import styles from './datepicker.scss';
import Header from './header';
import Input from './input';
import Typography from '../Typography';

import 'moment/locale/nl';

const DatePicker = ({
  onChange,
  defaultValue,
  format,
  inline,
  showTime,
  monthPicker,
  only,
  exclude,
  isStart,
  isEnd,
  start,
  end,
  disabled,
  openToDate,
  max,
  min,
  label,
  success,
  danger,
}) => {
  const cx = classnames.bind(styles);

  const [value, setValue] = useState(defaultValue);
  const [open, setOpen] = useState(false);

  useEffect(() => {
    onChange(value);
  }, [value]);

  return (
    <>
      {label && (
        <Typography.Text
          theme={(success && 'success') || (danger && 'danger')}
          bold
          push
        >
          {label}
        </Typography.Text>
      )}

      <ReactDatePicker
        openToDate={value || openToDate}
        disabled={disabled}
        selected={value}
        onChange={setValue}
        showMonthYearPicker={monthPicker}
        onSelect={newValue => setValue(newValue)}
        showPopperArrow={false}
        locale={nl}
        maxDate={max}
        minDate={min}
        selectsStart={isStart}
        selectsEnd={isEnd}
        startDate={start}
        endDate={end}
        onKeyDown={() => setOpen(!open)}
        customInput={
          <Input format={format} success={success} danger={danger} />
        }
        calendarClassName={cx('datepicker__container', {
          datepicker__container__time: showTime,
        })}
        timeCaption="Tijd"
        onCalendarOpen={() => setOpen(true)}
        onCalendarClose={() => setOpen(false)}
        inline={inline}
        showTimeSelect={showTime}
        includeDates={only}
        excludeDates={exclude}
        renderCustomHeader={({
          prevMonthButtonDisabled,
          nextMonthButtonDisabled,
          decreaseMonth,
          increaseMonth,
          changeYear,
          changeMonth,
        }) => (
          <Header
            currentValue={value}
            decreaseMonth={decreaseMonth}
            increaseMonth={increaseMonth}
            changeYear={changeYear}
            changeMonth={changeMonth}
            previousMonthDisabled={prevMonthButtonDisabled}
            nextMonthDisabled={nextMonthButtonDisabled}
          />
        )}
      />
    </>
  );
};

DatePicker.defaultProps = {
  onChange: () => {},
  defaultValue: undefined,
  format: 'D MMMM YYYY',
  inline: false,
  showTime: false,
  monthPicker: false,
  only: undefined,
  exclude: undefined,
  isStart: false,
  isEnd: false,
  start: undefined,
  end: undefined,
  disabled: false,
  openToDate: new Date(),
  max: undefined,
  min: undefined,
  label: null,
  success: false,
  danger: false,
};

DatePicker.propTypes = {
  onChange: PropTypes.func,
  defaultValue: PropTypes.instanceOf(Date),
  format: PropTypes.string,
  inline: PropTypes.bool,
  showTime: PropTypes.bool,
  monthPicker: PropTypes.bool,
  only: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.instanceOf(Date)),
    PropTypes.instanceOf(Date),
  ]),
  exclude: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.instanceOf(Date)),
    PropTypes.instanceOf(Date),
  ]),
  isStart: PropTypes.bool,
  isEnd: PropTypes.bool,
  start: PropTypes.instanceOf(Date),
  end: PropTypes.instanceOf(Date),
  disabled: PropTypes.bool,
  openToDate: PropTypes.instanceOf(Date),
  max: PropTypes.instanceOf(Date),
  min: PropTypes.instanceOf(Date),
  label: PropTypes.string,
  success: PropTypes.bool,
  danger: PropTypes.bool,
};

export default DatePicker;