import * as React from 'react';

const getYear = (date) => date.getFullYear()

const getMonth = (date) => date.toLocaleString('en', { month: 'long' })

const MultiMonthHeader = ({
                              customHeaderCount,
                              decreaseMonth,
                              increaseMonth,
                              monthDate,
                              nextMonthButtonDisabled,
                              prevMonthButtonDisabled,
                          }) => (
    <p className="react-datepicker__current-month--custom">
        <b className="react-datepicker__current-month">
            {getMonth(monthDate)} {getYear(monthDate)}
        </b>
        <button
            aria-label="Previous Month"
            className="react-datepicker__navigation-icon--previous--custom btn btn-inline"
            type="button"
            disabled={prevMonthButtonDisabled}
            onClick={decreaseMonth}
            style={customHeaderCount === 0 ? { visibility: 'hidden' } : null}
        >
            <span className="icon-caret-spin-left"></span>
            <span className="sr-only">Previous Month</span>
        </button>
        <button
            aria-label="Next Month"
            className="react-datepicker__navigation-icon--next--custom btn btn-inline"
            type="button"
            disabled={nextMonthButtonDisabled}
            onClick={increaseMonth}
            style={customHeaderCount === 0 ? { visibility: 'hidden' } : null}
        >
            <span className="icon-caret"></span>
            <span className="sr-only">Next Month</span>
        </button>
    </p>
)
MultiMonthHeader.displayName = 'DatePicker.MultiMonthHeader'

const SingleMonthHeader = ({
                               decreaseMonth,
                               increaseMonth,
                               monthDate,
                               nextMonthButtonDisabled,
                               prevMonthButtonDisabled,
                           }) => (
    <p className="react-datepicker__current-month--custom">
        <b className="react-datepicker__current-month">
            {getMonth(monthDate)} {getYear(monthDate)}
        </b>
        <button
            aria-label="Previous Month"
            className="react-datepicker__navigation-icon--previous--custom btn btn-inline"
            type="button"
            disabled={prevMonthButtonDisabled}
            onClick={decreaseMonth}
        >
            <span className="icon-caret-spin-left"></span>
            <span className="sr-only">Previous Month</span>
        </button>
        <button
            aria-label="Next Month"
            className="react-datepicker__navigation-icon--next--custom btn btn-inline"
            type="button"
            disabled={nextMonthButtonDisabled}
            onClick={increaseMonth}
        >
            <span className="icon-caret"></span>
            <span className="sr-only">Next Month</span>
        </button>
    </p>
)
SingleMonthHeader.displayName = 'DatePicker.SingleMonthHeader'

const CustomInput = React.forwardRef(
    (
        {
            // @ts-ignore
            className,
            // @ts-ignore
            errorText,
            // @ts-ignore
            hasError,
            // @ts-ignore
            inputId,
            // @ts-ignore
            inputName,
            // @ts-ignore
            placeholderText,
            // @ts-ignore
            value,
            // @ts-ignore
            onChange,
            // @ts-ignore
            onClick,
            // @ts-ignore
            disabled,
            // @ts-ignore
            readOnly,
            // @ts-ignore
            onFocus,
        },
        ref
    ) => {
        let inputGroupClassName = hasError ? 'is-invalid input-group ' : 'input-group '
        inputGroupClassName += className;

        const renderError = (hasError, errorText) => {
            if (hasError === true) {
                return <div className="invalid">{errorText}</div>
            }
        }

        return (
            <>
                <div className={inputGroupClassName} onClick={onClick}>
                    <input
                        id={inputId}
                        name={inputName}
                        placeholder={placeholderText}
                        value={value}
                        className="form-control"
                        type="text"
                        onChange={onChange}
                        onFocus={onFocus}
                        disabled={disabled}
                        readOnly={readOnly}
                        autoComplete="off"
                    />
                    <div className="input-group-append">
                        <button type="button" className="btn btn-link" >
                            <span className="sr-only">Choose Date</span>
                            <span aria-hidden="true" className="icon-calendar" title="ChooseDate"></span>
                        </button>
                    </div>
                </div>
                {renderError(hasError, errorText)}
            </>
        )
    }
)

export interface MmuiBlueDatepickerOptions {
    selected?: any,
    startDate?: any,
    endDate?: any,
    selectsRange?: boolean,
    errorText?: string,
    hasError?: boolean,
    id: string,
    name: string,
    placeholderText?: string,
    inputReadOnly?: boolean,
}

export function getMmuiBlueDatepickerProps(
    options: MmuiBlueDatepickerOptions =
        {
            selected: null,
            startDate: null,
            endDate: null,
            selectsRange: false,
            errorText: 'Please select a date',
            hasError: false,
            id: 'id_input_cal',
            name: 'calendar-input',
            placeholderText: '',
            inputReadOnly: false,
        }
) {
    const popperMods = [{ name: 'offset', options: { offset: [0, -10] } }];
    const customInput = (
        <CustomInput
            // @ts-ignore
            errorText={options.errorText}
            hasError={options.hasError}
            inputId={options.id}
            inputName={options.name}
            placeholderText={options.placeholderText}
            value={options.selected}
            readOnly={options.inputReadOnly}
        />
    );
    let customHeader;
    if (options.selectsRange) {
        customHeader = MultiMonthHeader;
    } else {
        customHeader = SingleMonthHeader;
    }

    let props = {
        customInput: customInput,
        popperModifiers: popperMods,
        renderCustomHeader: customHeader,
        showPopperArrow: false,
        monthsShown: options.selectsRange ? 2 : 1,
        preventOpenOnFocus: true,
        selected: options.selected,
        selectsRange: options.selectsRange,
        startDate: options.startDate,
        endDate: options.endDate,
        closeOnScroll: true,
        dateFormat: "MMM d, yyyy",
    };
    return(props);
}