import React, { useCallback, useEffect, useRef, useState } from "react";
import { useFloating, getScrollParents, shift, size, flip } from "@floating-ui/react-dom";
import styled from "styled-components";
import { IconsLegacy } from "../../../";
import Flex from "../../layout/Flex";
import Box from "../../layout/Flex";
import Text from "../../asorted/Text";
const ButtonContainer = styled(Box).attrs({
    flexDirection: "row",
    width: "auto",
    alignItems: "center",
    height: "36px",
}) `
  cursor: ${p => !p.disabled && "pointer"};
  > :last-child {
    /* targeting the dropdown icon */
    ${p => p.opened && "transform: rotate(180deg);"}
    margin-left: ${p => p.theme.space[3]}px;
  }
`;
const DropdownContainer = styled(Flex).attrs(({ theme }) => {
    const isLight = theme.colors.type === "light";
    return {
        zIndex: 1,
        flexDirection: "column",
        padding: 3,
        border: `1px solid ${theme.colors.neutral[isLight ? "c20" : "c30"]}`,
        borderRadius: "8px",
        backgroundColor: isLight ? "neutral.c00" : "neutral.c20",
        color: theme.colors.neutral.c80,
    };
}) `
  overflow-y: auto;
  box-shadow: 0px 6px 12px rgba(0, 0, 0, ${p => (p.theme.colors.type === "light" ? 0.04 : 0.08)});
`;
export const placements = ["bottom-start", "bottom", "bottom-end"];
const DropdownGeneric = ({ label, closeOnClickOutside = true, closeOnClickInside = false, disabled = false, placement = "bottom", flipDisabled = false, children, }) => {
    const divRef = useRef(null);
    const [maxHeight, setMaxHeight] = useState();
    const [maxWidth, setMaxWidth] = useState();
    const [opened, setOpened] = useState(false);
    const handleClickButton = useCallback(() => {
        if (!disabled)
            setOpened(!opened);
    }, [opened, disabled]);
    const handleClickInside = useCallback(() => {
        if (closeOnClickInside)
            setOpened(false);
    }, [setOpened, closeOnClickInside]);
    const { x, y, reference, floating, strategy, update, refs } = useFloating({
        placement: placements.includes(placement) ? placement : "bottom",
        middleware: [
            shift(),
            ...(flipDisabled ? [] : [flip()]),
            size({
                padding: 6,
                apply({ height, width }) {
                    setMaxHeight(height);
                    setMaxWidth(width);
                },
            }),
        ],
    });
    const handleResizeOrScroll = useCallback(() => {
        if (opened && !disabled)
            update();
    }, [opened, disabled, update]);
    useEffect(() => {
        if (!refs.reference.current || !refs.floating.current) {
            return;
        }
        const parents = [
            ...getScrollParents(refs.reference.current),
            ...getScrollParents(refs.floating.current),
        ];
        parents.forEach(parent => {
            parent.addEventListener("scroll", handleResizeOrScroll);
            parent.addEventListener("resize", handleResizeOrScroll);
        });
        return () => {
            parents.forEach(parent => {
                parent.removeEventListener("scroll", handleResizeOrScroll);
                parent.removeEventListener("resize", handleResizeOrScroll);
            });
        };
    }, [flipDisabled, refs.reference, refs.floating, handleResizeOrScroll]);
    useEffect(() => {
        function handleClickOutside(event) {
            if (closeOnClickOutside &&
                opened &&
                divRef.current &&
                !divRef.current.contains(event.target)) {
                setOpened(false);
            }
        }
        document.addEventListener("mousedown", handleClickOutside);
        return () => {
            document.removeEventListener("mousedown", handleClickOutside);
        };
    }, [closeOnClickOutside, opened, setOpened, divRef]);
    const color = disabled ? "neutral.c50" : "neutral.c100";
    return (React.createElement(Box, { ref: divRef },
        React.createElement(ButtonContainer, { ref: reference, onClick: handleClickButton, disabled: disabled, opened: opened && !disabled },
            React.createElement(Text, { variant: "paragraph", fontWeight: "medium", color: color }, label),
            React.createElement(IconsLegacy.DropdownMedium, { size: 20, color: color })),
        opened && !disabled && (React.createElement(DropdownContainer, { ref: floating, style: {
                position: strategy,
                top: y !== null && y !== void 0 ? y : "",
                left: x !== null && x !== void 0 ? x : "",
                maxHeight: maxHeight ? `${maxHeight}px` : "",
                maxWidth: maxWidth ? "" : "",
                // maxWidth: maxWidth ? `${maxWidth}px` : "", /* TODO: fix this */
            }, onClick: handleClickInside }, children))));
};
export default DropdownGeneric;
//# sourceMappingURL=index.js.map