import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import cn from "classnames";
import React, { cloneElement, useCallback, useEffect, useMemo, useRef, useState, } from "react";
import { createPortal } from "react-dom";
import { useClickOutside, useScrollOutside } from "../../../hooks/common";
import { FilledArrowDown, FilledArrowUp } from "../icons";
import { Container, Label, LeadingIcon, Link, Placeholder, Select, SelectedModal, SelectOption, Title, TrailingIcon, } from "./select.styled";
import { setModalPosition, showModal } from "./util";
const SelectElement = ({ label, leadingIcon, trailingIcon, error, linkLabel, onLinkClick, children, placeholder, value, onChange, onClick, className, disabled, readOnly, ref, }) => {
    const [open, setOpen] = useState(false);
    const [selectedValue, setSelectedValue] = useState(value);
    const container = useRef(null);
    const modal = useRef(null);
    const closeModal = useCallback(() => {
        setOpen(false);
    }, []);
    const toggleModal = useCallback(() => {
        setOpen((prev) => !prev);
    }, []);
    useClickOutside(container, closeModal);
    useScrollOutside(container, closeModal, undefined, true, open);
    const selected = useMemo(() => {
        let e;
        React.Children.forEach(children, (child) => {
            // @ts-ignore
            if (child?.props.value === selectedValue)
                e = child;
        });
        return e;
    }, [children, selectedValue]);
    const handleSelectClick = useCallback((e) => {
        if (disabled || readOnly)
            return;
        onClick?.(e);
        toggleModal();
    }, [disabled, readOnly, onClick, toggleModal]);
    const handleLinkClick = useCallback((e) => {
        e.stopPropagation();
        onLinkClick?.();
    }, [onLinkClick]);
    const handleOptionClick = useCallback((e) => {
        setSelectedValue(e.currentTarget.dataset.value);
        closeModal();
    }, [closeModal]);
    useEffect(() => {
        setSelectedValue(value);
    }, [value]);
    useEffect(() => {
        selectedValue && onChange?.(selectedValue);
        /* eslint-disable react-hooks/exhaustive-deps */
    }, [selectedValue]);
    useEffect(() => {
        if (!modal.current)
            return;
        if (!container.current)
            return;
        if (!open)
            return;
        setModalPosition(container, modal);
        showModal(modal);
    }, [open]);
    return (_jsxs(Container, { ref: container, onClick: handleSelectClick, className: cn("ui-select__container", className, {
            error,
            disabled,
            "read-only": !!readOnly,
            "leading-icon": !!leadingIcon,
            "trailing-icon": true,
        }), children: [leadingIcon && _jsx(LeadingIcon, { children: leadingIcon }), _jsx(Select, { ref: ref, disabled: disabled, type: "button", className: cn("ui-select", { error }), children: selected ?? _jsx(Placeholder, { children: placeholder }) }), open &&
                createPortal(_jsx(SelectedModal, { ref: modal, onClick: (e) => e.stopPropagation(), children: React.Children.map(children, (child) => {
                        if (!child)
                            return null;
                        // @ts-expect-error
                        return cloneElement(child, {
                            className: cn({
                                // @ts-expect-error
                                selected: child.props.value === selectedValue,
                            }),
                            onClick: handleOptionClick,
                        });
                    }) }), document.body), _jsx(TrailingIcon, { children: trailingIcon ?? (open ? _jsx(FilledArrowUp, {}) : _jsx(FilledArrowDown, {})) }), _jsxs(Title, { children: [_jsx(Label, { children: label }), _jsx(Link, { onClick: handleLinkClick, children: linkLabel })] })] }));
};
const Option = ({ value, ...rest }) => {
    return _jsx(SelectOption, { "data-value": value, ...rest });
};
export default Object.assign(SelectElement, { Option });
//# sourceMappingURL=select.js.map