import React from 'react';
import PropTypes from 'prop-types';
import InputMask from 'react-input-mask';
import cx from 'classnames';

import styles from './styles.scss';

const RangeInputs = ({
  clearDate,
  committedDates,
  currentMonth,
  dateFormat,
  isRange,
  isTyping,
  keyboardTempValues,
  onInputBlur,
  setIsTyping,
  setEndDate,
  setKeyboardSingleDate,
  setStartDate,
  setStep,
  step,
  locale
}) => {
  const getInputMaskFormat = () => {
    return dateFormat.replace(/[MDY]/g, '9');
  };
  const inputMaskFormat = getInputMaskFormat();

  return (
    <div className={styles['range-inputs']}>
      <div
        className={cx(styles['range-inputs__container'], {
          [styles['range-inputs__container--active']]: step === 0
        })}
      >
        <InputMask
          mask={inputMaskFormat}
          placeholder={(Object.keys(committedDates[0]).length > 0 && committedDates[0]) ? '' : dateFormat}
          className={styles['range-inputs__input']}
          onChange={
            isRange
              ? e => setStartDate({ value: e.target.value })
              : e => setKeyboardSingleDate({ value: e.target.value })
          }
          onFocus={() => {
            setIsTyping(true);
            setStep(0);
          }}
          onBlur={() => {
            setIsTyping(false);
            setStep(0);
            onInputBlur();
          }}
          type='text'
          value={
            (isTyping && keyboardTempValues[0]) ||
            (Object.keys(committedDates[0]).length > 0 && committedDates[0].format(dateFormat)) ||
            ''
          }
        />
        <button
          className={cx('fa', styles['range-inputs__button-clear'])}
          onClick={() => {
            clearDate(0);
            setStep(0);
          }}
        />
      </div>
      {isRange && <div style={{ width: 10 }} />}
      {isRange && (
        <div
          className={cx(styles['range-inputs__container'], {
            [styles['range-inputs__container--active']]: step === 1
          })}
        >
          <InputMask
            mask={inputMaskFormat}
            placeholder={(Object.keys(committedDates[1]).length > 0 && committedDates[1]) ? '' : dateFormat}
            className={styles['range-inputs__input']}
            onChange={e => setEndDate({ value: e.target.value })}
            onFocus={() => {
              setIsTyping(true);
              setStep(1);
            }}
            onBlur={() => {
              setIsTyping(false);
              setStep(1);
              onInputBlur();
            }}
            type='text'
            value={
              (isTyping && keyboardTempValues[1]) ||
              (Object.keys(committedDates[1]).length > 0 && committedDates[1].format(dateFormat)) ||
              ''
            }
          />
          <button
            className={cx('fa', styles['range-inputs__button-clear'])}
            onClick={() => {
              clearDate(1);
              setStep(1);
            }}
          />
        </div>
      )}
    </div>
  );
};

RangeInputs.propTypes = {
  clearDate: PropTypes.func,
  committedDates: PropTypes.arrayOf(PropTypes.object),
  dateFormat: PropTypes.string,
  isRange: PropTypes.bool,
  isTyping: PropTypes.bool,
  keyboardTempValues: PropTypes.arrayOf(PropTypes.string),
  onInputBlur: PropTypes.func,
  onSelect: PropTypes.func,
  setIsTyping: PropTypes.func,
  setEndDate: PropTypes.func,
  setKeyboardSingleDate: PropTypes.func,
  setStartDate: PropTypes.func,
  setStep: PropTypes.func,
  step: PropTypes.number,
  locale: PropTypes.string
};

export default RangeInputs;