'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var styles = require('../../../Field/styles.js');
var React = require('react');
var Close = require('../../../../icons/Close.js');
var index = require('../../../../utils/index.js');
var index$3 = require('../../../IconButton/index.js');
var index$2 = require('../../../Modal/index.js');
var utils = require('../../utils.js');
var index$7 = require('../actionButtons/index.js');
var index$5 = require('../calendar/index.js');
var index$4 = require('../dayNameRow/index.js');
var index$1 = require('../input/index.js');
var index$6 = require('../selectors/index.js');
var styles$1 = require('./styles.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

function DatePickerNarrow(props) {
    var _a;
    const [showModal, setShowModal] = React.useState(false);
    const [months, setMonths] = React.useState([
        { month: props.month, year: props.year },
    ]);
    const [calendarsRef, setCalendarsRef] = React.useState();
    const [firstRef, setFirstRef] = React.useState();
    const [selectedRef, setSelectedRef] = React.useState();
    const [currentMonthRef, setCurrentMonthRef] = React.useState();
    const [innerWidth, setInnerWidth] = React.useState(0);
    const appendTestId = index.getId(props['data-testid']);
    React.useEffect(() => {
        setMonths(utils.getInitialMonths(props.month, props.year));
    }, [props.month, props.year]);
    React.useEffect(() => {
        if (selectedRef) {
            selectedRef.scrollIntoView();
        }
    }, [selectedRef]);
    function handleSelectorClick(selector) {
        props.onSelectorClick(selector);
    }
    React.useEffect(() => {
        if (calendarsRef && firstRef) {
            if (selectedRef) {
                calendarsRef.scrollTop =
                    selectedRef.getBoundingClientRect().y -
                        selectedRef.getBoundingClientRect().height / 2;
            }
            else {
                if (currentMonthRef) {
                    calendarsRef.scrollTop =
                        currentMonthRef.getBoundingClientRect().y -
                            currentMonthRef.getBoundingClientRect().height / 2 -
                            10;
                }
            }
        }
    }, [calendarsRef]);
    React.useEffect(() => {
        if (calendarsRef) {
            setInnerWidth(calendarsRef.clientWidth -
                (calendarsRef.offsetWidth - calendarsRef.clientWidth));
        }
    }, [calendarsRef === null || calendarsRef === void 0 ? void 0 : calendarsRef.offsetWidth, window.innerWidth]);
    function handleConfirm() {
        props.onConfirm();
        setShowModal(false);
    }
    function handleDismiss() {
        props.onDismiss();
        setShowModal(false);
    }
    function handleScroll(event) {
        const target = event.currentTarget;
        if (target.scrollTop <= 20) {
            if (calendarsRef && firstRef) {
                calendarsRef.scrollTop = firstRef.getClientRects()[0].height + 20;
            }
            if (months[0].month === 0) {
                setMonths([
                    {
                        month: 11,
                        year: months[0].year - 1,
                    },
                    ...months,
                ]);
            }
            else {
                setMonths([
                    {
                        month: months[0].month - 1,
                        year: months[0].year,
                    },
                    ...months,
                ]);
            }
        }
        else if (target.scrollHeight - target.scrollTop <=
            target.clientHeight + 500) {
            const lastMonth = months.slice(-1)[0];
            if (lastMonth.month >= 11) {
                setMonths([
                    ...months,
                    {
                        month: 0,
                        year: lastMonth.year + 1,
                    },
                ]);
            }
            else {
                setMonths([
                    ...months,
                    {
                        month: lastMonth.month + 1,
                        year: lastMonth.year,
                    },
                ]);
            }
        }
    }
    function setRefs(element, index, month, year) {
        if (index === 1) {
            setFirstRef(element);
        }
        if (props.selectedRange) {
            if (year === props.selectedRange.start.getFullYear() &&
                month === props.selectedRange.start.getMonth()) {
                setSelectedRef(element);
            }
        }
        const date = new Date();
        if (year === date.getFullYear() && month === date.getMonth()) {
            setCurrentMonthRef(element);
        }
    }
    return (React__default['default'].createElement(React__default['default'].Fragment, null,
        props.label && (React__default['default'].createElement(styles.LabelWrapper, { disabled: props.disabled, hasLabel: Boolean(props.label) },
            React__default['default'].createElement(styles.Label, { "data-testid": appendTestId('label'), disabled: props.disabled }, props.label))),
        React__default['default'].createElement(index$1.Input, { value: props.selectedRange, variant: props.variant, placeholder: (_a = props.placeholder) !== null && _a !== void 0 ? _a : '', visible: showModal, disabled: props.disabled, locale: props.locale, handleClick: () => setShowModal(true), getInputLabel: props.getInputLabel }),
        React__default['default'].createElement(index$2.Modal, { isOpen: showModal, onClose: index.noop, size: "large", isLoading: false },
            React__default['default'].createElement(styles$1.ModalContent, null,
                React__default['default'].createElement(styles$1.Header, { width: innerWidth },
                    React__default['default'].createElement(styles$1.Title, null,
                        (props.selectedRange &&
                            utils.formatInputValue(props.selectedRange, props.locale, props.variant)) ||
                            '',
                        React__default['default'].createElement(index$3.IconButton, { icon: React__default['default'].createElement(Close['default'], null), variant: "ghost", size: "x-small", onClick: () => setShowModal(false) })),
                    React__default['default'].createElement(index$4.DayNameRow, { startingDay: props.startingDay, narrow: true, locale: props.locale, scrollBarWidth: calendarsRef
                            ? calendarsRef.offsetWidth - calendarsRef.clientWidth
                            : 0 })),
                React__default['default'].createElement(styles$1.CalendarsWrapper, { ref: (element) => element && setCalendarsRef(element), onScroll: handleScroll }, months.map((m, index) => (React__default['default'].createElement("div", { key: `${props.month}-${index}`, ref: (element) => element && setRefs(element, index, m.month, m.year) },
                    React__default['default'].createElement(index$5.Calendar, { selection: props.selection, selectedRange: props.selectedRange, month: m.month, year: m.year, startingDay: props.startingDay, locale: props.locale, handleChange: props.handleChange, eventDates: props.eventDates, minDate: props.minDate, maxDate: props.maxDate, showSelectors: !!props.showSelectors, narrow: true, visible: true }))))),
                props.showSelectors && props.selectedSelector && (React__default['default'].createElement("div", null,
                    React__default['default'].createElement(index$6.SelectorsOld, { handleChange: handleSelectorClick, defaultSelectorValues: props.defaultSelectorValues, customSelectors: props.customSelectors, selectedSelector: props.selectedSelector, narrow: true }))),
                utils.shouldUseSelectorsProp(props.selectors) && props.selectedSelector && (React__default['default'].createElement("div", null,
                    React__default['default'].createElement(index$6.Selectors, { handleChange: handleSelectorClick, selectors: props.selectors, selectedSelector: props.selectedSelector, narrow: true }))),
                React__default['default'].createElement(index$7.ActionButtons, { confirmText: props.confirmText, dismissText: props.dismissText, onDismiss: handleDismiss, onConfirm: handleConfirm, narrow: true })))));
}

exports.DatePickerNarrow = DatePickerNarrow;
