import React from "react";
import { components } from "react-select";
import { useTheme } from "styled-components";
import SelectInput from "../../form/SelectInput";
import Text from "../../asorted/Text";
import { IconsLegacy } from "../../../";
import { ValueContainer } from "../../form/SelectInput/ValueContainer";
import FlexBox from "../../layout/Flex";
function DropdownControl(props) {
    const { selectProps, children } = props;
    const { label } = selectProps;
    return (React.createElement(components.Control, { ...props },
        React.createElement(Text, { variant: "paragraph", fontWeight: "medium", color: "neutral.c80", mr: 2 }, label),
        children));
}
function DropdownValueContainer(props) {
    const isOpen = props.selectProps.menuIsOpen;
    return (React.createElement(ValueContainer, { ...props, render: () => (React.createElement(FlexBox, { alignItems: "center" },
            React.createElement(Text, { variant: "paragraph", fontWeight: "medium", mr: 2 },
                React.createElement(FlexBox, null, props.children)),
            React.createElement(FlexBox, { alignItems: "center", style: { transform: isOpen ? "rotate(180deg)" : "" } },
                React.createElement(IconsLegacy.DropdownMedium, { size: 20 })))) }));
}
function DropdownIndicatorsContainer() {
    return null;
}
export default function Dropdown(props) {
    const theme = useTheme();
    const { styles, ...rest } = props;
    return (React.createElement(SelectInput, { placeholder: "", isSearchable: false, styles: {
            singleValue: provided => ({
                ...provided,
                color: theme.colors.neutral.c100,
                margin: 0,
                top: undefined,
                position: undefined,
                overflow: undefined,
                maxWidth: undefined,
                transform: undefined,
            }),
            input: () => ({ display: "none" }),
            menu: provided => ({
                ...provided,
                border: 0,
                boxShadow: "none",
                background: "none",
                width: "auto",
                minWidth: "200px",
            }),
            ...styles,
        }, ...rest, components: {
            Control: DropdownControl,
            ValueContainer: DropdownValueContainer,
            IndicatorsContainer: DropdownIndicatorsContainer,
        } }));
}
//# sourceMappingURL=index.js.map