import React, { memo, useMemo } from "react";
import Select from "react-select";
import { useTheme } from "styled-components";
import * as DropdownIndicatorModule from "./DropdownIndicator";
import * as ValueContainerModule from "./ValueContainer";
import * as ControlModule from "./Control";
import * as MenuListModule from "./MenuList";
import * as OptionModule from "./Option";
import { IndicatorsContainer } from "./IndicatorsContainer";
import { InputErrorContainer } from "../BaseInput";
const stylesFn = (theme) => ({
    control: ControlModule.getStyles(theme),
    valueContainer: ValueContainerModule.getStyles(),
    dropdownIndicator: DropdownIndicatorModule.getStyles(),
    menuList: MenuListModule.getStyles(theme),
    option: OptionModule.getStyles(),
    input: provided => ({
        ...provided,
        color: theme.colors.neutral.c100,
    }),
    placeholder: provided => ({
        ...provided,
        color: theme.colors.neutral.c60,
    }),
    singleValue: provided => ({
        ...provided,
        color: "inherit",
    }),
    multiValue: provided => ({
        ...provided,
        backgroundColor: theme.colors.primary.c20,
        borderRadius: theme.radii[1],
    }),
    multiValueLabel: provided => ({
        ...provided,
        color: theme.colors.neutral.c100,
    }),
    multiValueRemove: provided => ({
        ...provided,
        cursor: "pointer",
        ":hover": {
            color: theme.colors.error.c50,
            backgroundColor: theme.colors.error.c30,
        },
    }),
    menu: provided => ({
        ...provided,
        border: 0,
        boxShadow: "none",
        background: "none",
    }),
});
function SelectInput({ error, rowHeight = 48, unwrapped, extendStyles, ...props }) {
    const theme = useTheme();
    const styles = useMemo(() => (extendStyles ? extendStyles(stylesFn(theme)) : stylesFn(theme)), [theme, extendStyles]);
    const { isDisabled, components = {} } = props;
    const innerContent = (React.createElement(Select, { ...props, styles: {
            ...styles,
            ...props.styles,
        }, classNamePrefix: "react-select", components: {
            Control: ControlModule.Control,
            ValueContainer: ValueContainerModule.ValueContainer,
            IndicatorsContainer,
            DropdownIndicator: DropdownIndicatorModule.DropdownIndicator,
            MenuList: MenuListModule.MenuList,
            Option: OptionModule.Option,
            IndicatorSeparator: null,
            ...components,
        }, 
        // @ts-expect-error We want to be able to pass extra props here…
        rowHeight: rowHeight }));
    if (unwrapped)
        return innerContent;
    return (React.createElement("div", null,
        innerContent,
        error && !isDisabled && (React.createElement(InputErrorContainer, { variant: "paragraph" }, error))));
}
export default memo(SelectInput);
//# sourceMappingURL=index.js.map