import React from 'react';
import {observer} from 'mobx-react';
import PropTypes from 'prop-types';
import DatePickerVendorComponent from 'react-date-picker/dist/entry.nostyle';
import isString from 'lodash.isstring';
import TimeHelper, {defaultMinDate, formatDate} from 'Services/time-service';
import {getDefaultLanguage, getLocale} from 'Services/i18n.service';
import moment from 'moment';
import Label from '../Label';
import Icon from '../Icon';
import './style.scss';

const locale = getLocale(getDefaultLanguage());
const TimeService = new TimeHelper();

export const POSITION = {
    TOP: 'top',
    BOTTOM: 'bottom',
};

const DatePicker = observer(({
    value,
    format,
    onChange,
    minDate,
    maxDate,
    required,
    label,
    name,
    calendarPosition,
    isDisabled,
    isClearable,
}) => {
    const prepareDate = (dateValue, dateFormat, defaultValue) => {
        let preparedValue = dateValue;
        if (isString(dateValue)) {
            if (dateValue.length) {
                preparedValue = (dateFormat.length ? moment(dateValue, dateFormat) : moment(dateValue)).toDate();
            } else {
                return defaultValue;
            }
        }
        return preparedValue;
    };

    return (
        <div className={`DatePicker DatePicker_${calendarPosition}`}>
            {label && <Label label={label} for={name} />}
            <DatePickerVendorComponent
                name={name}
                onChange={(date) => {
                    return date ? onChange(TimeService.getHumanDate(date)) : onChange('');
                }}
                value={prepareDate(value, format, DatePicker.defaultProps.value)}
                calendarIcon={<Icon name="date" size="small" />}
                clearIcon={isClearable ? <Icon name="close" size="small" /> : null}
                required={required}
                minDate={prepareDate(minDate, format, DatePicker.defaultProps.minDate)}
                maxDate={prepareDate(maxDate, format, DatePicker.defaultProps.maxDate)}
                showLeadingZeros
                disabled={isDisabled}
                minDetail="month"
                navigationLabel={({date}) => date.toLocaleString(locale, {month: 'long', year: 'numeric'})}
                prevLabel={<Icon name="arrow-left" size="medium" color="blue" />}
                nextLabel={<Icon name="arrow-right" size="medium" color="blue" />}
                locale={locale}
                tileClassName="DatePicker__cell"
                showNeighboringMonth
            />
        </div>
    );
});

DatePicker.propTypes = {
    name: PropTypes.string.isRequired,
    onChange: PropTypes.func.isRequired,
    value: PropTypes.oneOfType([
        PropTypes.instanceOf(Date),
        PropTypes.string,
    ]),
    minDate: PropTypes.oneOfType([
        PropTypes.instanceOf(Date),
        PropTypes.string,
    ]),
    maxDate: PropTypes.oneOfType([
        PropTypes.instanceOf(Date),
        PropTypes.string,
    ]),
    format: PropTypes.string,
    label: PropTypes.string,
    required: PropTypes.bool,
    isDisabled: PropTypes.bool,
    calendarPosition: PropTypes.oneOf([POSITION.TOP, POSITION.BOTTOM]),
    isClearable: PropTypes.bool,
};

DatePicker.defaultProps = {
    value: undefined,
    minDate: moment(defaultMinDate, 'DD-MM-YYYY').toDate(),
    maxDate: moment().add(10, 'years').toDate(),
    label: null,
    format: formatDate,
    required: false,
    isDisabled: false,
    calendarPosition: POSITION.BOTTOM,
    isClearable: false,
};

export default DatePicker;