import { __read } from "tslib";
// @ts-nocheck
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/click-events-have-key-events */
import './CalendarInput.css';
import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';
import { useClickOutside } from '../../hooks/useClickOutside/useClickOutside';
import { IconCalendar } from '../../icons/IconCalendar/IconCalendar';
import { cn } from '../../utils/bem';
import { formatDate } from '../../utils/date';
import { isDefined } from '../../utils/type-guards';
import { Calendar } from '../Calendar/Calendar';
import { usePropsHandler } from '../EventInterceptor/usePropsHandler';
import { Popover } from '../Popover/Popover';
import { Tag } from '../Tag/Tag';
export var cnCalendarInput = cn('CalendarInput');
export var cnCalendarInputDropdown = cn('CalendarInputDropdown');
export var CalendarInput = React.forwardRef(function (props, ref) {
    var _a = usePropsHandler(cnCalendarInput(), props), value = _a.value, _b = _a.direction, direction = _b === void 0 ? 'downStartRight' : _b, 
    // controlRef,
    _c = _a.size, 
    // controlRef,
    size = _c === void 0 ? 'm' : _c, _d = _a.view, view = _d === void 0 ? 'cultured' : _d, _e = _a.placeholder, placeholder = _e === void 0 ? 'выберите дату' : _e, _f = _a.rightSide, rightSide = _f === void 0 ? IconCalendar : _f, onChange = _a.onChange, onCancel = _a.onCancel, type = _a.type, locale = _a.locale;
    var RightIcon = rightSide;
    var rightSideIsString = typeof rightSide === 'string';
    var _g = __read(useState(false), 2), isOpen = _g[0], setIsOpen = _g[1];
    // eslint-disable-next-line react-hooks/rules-of-hooks
    var calendarInputRef = ref || React.useRef(null);
    // eslint-disable-next-line react-hooks/rules-of-hooks
    var dropdownRef = React.useRef(null);
    var renderValue = function (value) {
        var valueFormatted = '';
        if (isDefined(value[0])) {
            valueFormatted += formatDate(value[0]);
        }
        if (isDefined(value[1])) {
            if (isDefined(value[0]))
                valueFormatted += ' - ';
            valueFormatted += formatDate(value[1]);
        }
        return React.createElement(Tag, { label: valueFormatted, mode: "cancel", onCancel: onCancel });
    };
    useClickOutside({
        isActive: isOpen,
        ignoreClicksInsideRefs: [calendarInputRef, dropdownRef],
        handler: function () {
            setIsOpen(false);
        }
    });
    return (React.createElement("div", { className: cnCalendarInput({
            size: size,
            view: view,
            focused: isOpen,
            value: Boolean(value)
        }) },
        React.createElement("div", { className: cnCalendarInput('Control'), ref: calendarInputRef, onClick: function () {
                setIsOpen(!isOpen);
            } },
            React.createElement("div", { className: cnCalendarInput('ControlInner') },
                React.createElement("div", { className: cnCalendarInput('ControlValueContainer') },
                    value && renderValue(value),
                    !value && placeholder && (React.createElement("span", { className: cnCalendarInput('Placeholder'), title: "placeholder" }, placeholder)))),
            RightIcon && (React.createElement("div", { className: cnCalendarInput('Side', {
                    position: 'right',
                    type: rightSideIsString ? 'string' : 'icon'
                }), title: typeof rightSide === 'string' ? rightSide : undefined }, rightSideIsString ? (rightSide) : (React.createElement(RightIcon, { className: cnCalendarInput('Icon'), size: "s" }))))),
        React.createElement(CSSTransition, { "in": isOpen, unmountOnExit: true, appear: true, timeout: 200 },
            React.createElement(Popover, { ref: dropdownRef, anchorRef: calendarInputRef, direction: direction, possibleDirections: ['downStartLeft', 'upStartLeft', 'downStartRight', 'upStartRight'], offset: 1, role: "listbox", className: cnCalendarInputDropdown(), equalAnchorWidth: true },
                React.createElement(Calendar, { value: value, onChange: onChange, type: type, locale: locale })))));
});
