import React from 'react';
import { st, classes } from './DatePickerDropdown.st.css.js';
import { ChevronDown } from '@wix/wix-ui-icons-common';
import DropdownBase from '../../DropdownBase';
import TextButton from '../../TextButton';
import { IconThemeContext } from '../../WixDesignSystemIconThemeProvider/IconThemeContext';
const YEAR_ADD = 15;
export default class DropdownPicker extends React.Component {
    constructor() {
        super(...arguments);
        this.state = {
            open: false,
            visibleOptions: this.props.options.slice(0, this.props.selectedId + YEAR_ADD),
        };
        this._onSelect = (data) => {
            const { onChange } = this.props;
            this.setState({
                open: false,
            }, () => {
                if (typeof onChange === 'function') {
                    onChange(data);
                }
            });
        };
        this._toggle = () => {
            this.setState({ open: !this.state.open });
        };
        this._onKeyDown = (e, delegateKeyDown) => {
            const eventWasHandled = delegateKeyDown(e);
            const { open } = this.state;
            // We'll open the list when pressing the ArrowDown key
            if (!eventWasHandled && e.key === 'ArrowDown') {
                this._open();
                e.preventDefault();
                return;
            }
            // close on Escape
            if (e.key === 'Escape') {
                this._close();
                e.preventDefault();
            }
            // prevent TextButton onClick event
            if (open && (e.key === 'Enter' || e.key === 'Spacebar' || e.key === ' ')) {
                e.preventDefault();
            }
        };
        this._close = () => {
            this.setState({ open: false });
        };
        this._open = () => {
            this.setState({ open: true });
        };
        this._fetchMoreOptions = () => {
            const length = this.state.visibleOptions.length;
            this.setState(({ visibleOptions }) => ({
                visibleOptions: [
                    ...visibleOptions,
                    ...this.props.options.slice(length, length + YEAR_ADD),
                ],
            }));
        };
    }
    componentDidUpdate(prevProps) {
        if (prevProps.options.length !== this.props.options.length ||
            this.props.selectedId >= this.state.visibleOptions.length) {
            this.setState({
                visibleOptions: this.props.options.slice(0, this.props.selectedId + YEAR_ADD),
            });
        }
    }
    render() {
        const { className, caption, options, dataHook, selectedId, ariaLabel, ariaLabelledBy, } = this.props;
        const { open } = this.state;
        const finalAriaLabel = ariaLabel ? `${ariaLabel} ${caption}` : undefined;
        return (React.createElement(IconThemeContext.Consumer, null, ({ icons = {} }) => {
            const ChevronDownIcon = icons.DatePickerDropdown?.ChevronDown || ChevronDown;
            return (React.createElement("div", { className: st(classes.root, className) },
                React.createElement(DropdownBase, { dataHook: dataHook, className: classes.dropdown, options: this.state.visibleOptions, onClickOutside: this._close, dynamicWidth: true, minWidth: 120, selectedId: selectedId, onSelect: this._onSelect, focusOnSelectedOption: true, open: open, infiniteScroll: true, hasMore: this.state.visibleOptions.length < options.length, loadMore: this._fetchMoreOptions, autoFocus: true }, ({ delegateKeyDown, listboxId, activeDescendantId }) => {
                    return (React.createElement(TextButton, { className: classes.caption, skin: "dark", size: "small", suffixIcon: React.createElement(ChevronDownIcon, null), onClick: this._toggle, dataHook: `${dataHook}-button`, onKeyDown: (e) => this._onKeyDown(e, delegateKeyDown), ariaLabel: finalAriaLabel, ariaLabelledBy: ariaLabelledBy, ariaHaspopup: "listbox", ariaExpanded: open, ariaControls: listboxId, ariaActiveDescendant: activeDescendantId }, caption));
                })));
        }));
    }
}
//# sourceMappingURL=DatePickerDropdown.js.map