import { LabelWrapper, Label } from '../../../Field/styles.js';
import React__default, { useState, useEffect } from 'react';
import Close from '../../../../icons/Close.js';
import { getId, noop } from '../../../../utils/index.js';
import { IconButton } from '../../../IconButton/index.js';
import { Modal } from '../../../Modal/index.js';
import { getInitialMonths, formatInputValue, shouldUseSelectorsProp } from '../../utils.js';
import { ActionButtons } from '../actionButtons/index.js';
import { Calendar } from '../calendar/index.js';
import { DayNameRow } from '../dayNameRow/index.js';
import { Input } from '../input/index.js';
import { SelectorsOld, Selectors } from '../selectors/index.js';
import { ModalContent, Header, Title, CalendarsWrapper } from './styles.js';

function DatePickerNarrow(props) {
    var _a;
    const [showModal, setShowModal] = useState(false);
    const [months, setMonths] = useState([
        { month: props.month, year: props.year },
    ]);
    const [calendarsRef, setCalendarsRef] = useState();
    const [firstRef, setFirstRef] = useState();
    const [selectedRef, setSelectedRef] = useState();
    const [currentMonthRef, setCurrentMonthRef] = useState();
    const [innerWidth, setInnerWidth] = useState(0);
    const appendTestId = getId(props['data-testid']);
    useEffect(() => {
        setMonths(getInitialMonths(props.month, props.year));
    }, [props.month, props.year]);
    useEffect(() => {
        if (selectedRef) {
            selectedRef.scrollIntoView();
        }
    }, [selectedRef]);
    function handleSelectorClick(selector) {
        props.onSelectorClick(selector);
    }
    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]);
    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.createElement(React__default.Fragment, null,
        props.label && (React__default.createElement(LabelWrapper, { disabled: props.disabled, hasLabel: Boolean(props.label) },
            React__default.createElement(Label, { "data-testid": appendTestId('label'), disabled: props.disabled }, props.label))),
        React__default.createElement(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.createElement(Modal, { isOpen: showModal, onClose: noop, size: "large", isLoading: false },
            React__default.createElement(ModalContent, null,
                React__default.createElement(Header, { width: innerWidth },
                    React__default.createElement(Title, null,
                        (props.selectedRange &&
                            formatInputValue(props.selectedRange, props.locale, props.variant)) ||
                            '',
                        React__default.createElement(IconButton, { icon: React__default.createElement(Close, null), variant: "ghost", size: "x-small", onClick: () => setShowModal(false) })),
                    React__default.createElement(DayNameRow, { startingDay: props.startingDay, narrow: true, locale: props.locale, scrollBarWidth: calendarsRef
                            ? calendarsRef.offsetWidth - calendarsRef.clientWidth
                            : 0 })),
                React__default.createElement(CalendarsWrapper, { ref: (element) => element && setCalendarsRef(element), onScroll: handleScroll }, months.map((m, index) => (React__default.createElement("div", { key: `${props.month}-${index}`, ref: (element) => element && setRefs(element, index, m.month, m.year) },
                    React__default.createElement(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.createElement("div", null,
                    React__default.createElement(SelectorsOld, { handleChange: handleSelectorClick, defaultSelectorValues: props.defaultSelectorValues, customSelectors: props.customSelectors, selectedSelector: props.selectedSelector, narrow: true }))),
                shouldUseSelectorsProp(props.selectors) && props.selectedSelector && (React__default.createElement("div", null,
                    React__default.createElement(Selectors, { handleChange: handleSelectorClick, selectors: props.selectors, selectedSelector: props.selectedSelector, narrow: true }))),
                React__default.createElement(ActionButtons, { confirmText: props.confirmText, dismissText: props.dismissText, onDismiss: handleDismiss, onConfirm: handleConfirm, narrow: true })))));
}

export { DatePickerNarrow };
