import { getColor, themeOr } from "../styles/themes.js";
import { Icon } from "./Icon/Icon.js";
import { z } from "../styles/z-index.js";
import { defaultTextInputTypography, fieldWidth, maxFieldWidth, textInputBorderColor, textInputBorderColorFocused, textInputPadding, textInputPlaceholderColor } from "../styles/fields.js";
import styled from "@emotion/styled";
import { useTheme } from "@emotion/react";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
import Select$1 from "react-select";
//#region src/components/Select.tsx
function Select({ zIndex, selectRef, label, openMenuOnFocus = true, tabSelectsValue = false, getMenuStyles, getOptionStyles, getControlStyles, getPlaceholderStyles, getInputStyles, getSingleValueStyles, ...rest }) {
	const theme = useTheme();
	const styles = {
		container: (styles, state) => {
			return {
				...styles,
				width: fieldWidth,
				maxWidth: maxFieldWidth,
				zIndex: z.select
			};
		},
		control: (styles, state) => {
			const controlStyles = getControlStyles ? getControlStyles(styles, state) : {
				padding: state.menuIsOpen || state.isFocused ? `11px` : textInputPadding,
				background: theme.bg,
				minHeight: 0,
				fontSize: 14,
				borderWidth: state.menuIsOpen || state.isFocused ? "2px" : "1px"
			};
			return {
				...styles,
				transition: "none",
				boxShadow: "none",
				"&:hover": { borderColor: state.menuIsOpen ? textInputBorderColorFocused({ theme }) : textInputBorderColor({ theme }) },
				borderColor: state.menuIsOpen || state.isFocused ? textInputBorderColorFocused({ theme }) : textInputBorderColor({ theme }),
				...controlStyles
			};
		},
		indicatorsContainer: (styles) => ({
			...styles,
			padding: "0 8px"
		}),
		indicatorSeparator: (styles) => ({ display: "none" }),
		menu: (styles, state) => {
			const menuStyles = getMenuStyles ? getMenuStyles(styles, state) : {
				...styles,
				overflow: "hidden",
				border: `2px solid ${theme.lcNeutral}`,
				backgroundColor: theme.bg,
				boxShadow: "0px 3px 6px 1px rgba(0,0,0,0.05)",
				borderColor: theme.hcNeutral,
				width: "max-content",
				minWidth: "100%"
			};
			return {
				...styles,
				...menuStyles
			};
		},
		option: (styles, props) => {
			const optionStyles = getOptionStyles ? getOptionStyles(styles, props) : {
				color: props.isFocused ? getColor(theme, defaultTextInputTypography.color) : props.isDisabled ? textInputPlaceholderColor({ theme }) : getColor(theme, defaultTextInputTypography.color),
				fontWeight: 600,
				cursor: "pointer",
				backgroundColor: props.isFocused ? themeOr(theme.c05Neutral, theme.c2Neutral)({ theme }) : theme.bg,
				WebkitTapHighlightColor: theme.c1Neutral,
				"&:active": { backgroundColor: themeOr(theme.c05Neutral, theme.c5Neutral)({ theme }) }
			};
			return {
				...styles,
				...optionStyles
			};
		},
		menuPortal: (styles) => ({
			...styles,
			fontSize: 14,
			zIndex: zIndex || z.selectFocused
		}),
		singleValue: (styles, state) => {
			const singleValueStyles = getSingleValueStyles ? getSingleValueStyles(styles, state) : {
				color: theme.text,
				fontWeight: 600,
				fontSize: 14
			};
			return {
				...styles,
				...singleValueStyles
			};
		},
		placeholder: (styles, state) => {
			const placeholderStyles = getPlaceholderStyles ? getPlaceholderStyles(styles, state) : { color: theme.mcNeutral };
			return {
				...styles,
				...placeholderStyles
			};
		},
		valueContainer: (styles) => ({
			...styles,
			padding: 0
		}),
		input: (styles, state) => {
			const inputStyles = getInputStyles ? getInputStyles(styles, state) : {
				color: theme.text,
				fontWeight: 600,
				fontSize: 14
			};
			return {
				...styles,
				...inputStyles
			};
		}
	};
	return /* @__PURE__ */ jsxs(StyledSelect, { children: [label && /* @__PURE__ */ jsx(SelectLabel, {
		hasError: false,
		children: label
	}), /* @__PURE__ */ jsx(Select$1, {
		...rest,
		styles,
		openMenuOnFocus,
		tabSelectsValue,
		menuPortalTarget: document.body,
		ref: selectRef,
		components: {
			DropdownIndicator: () => /* @__PURE__ */ jsx(Icon, {
				name: "Chevron",
				width: 16
			}),
			...rest.components
		},
		theme: (selectTheme) => ({
			...selectTheme,
			borderRadius: 8,
			colors: {
				danger: theme.danger,
				dangerLight: "#ff8",
				primary: theme.text,
				primary75: "#ccc",
				primary50: "#888",
				primary25: "#444",
				neutral0: "#000",
				neutral5: "#111",
				neutral10: "#222",
				neutral20: "#999",
				neutral30: "#aaa",
				neutral40: "#bbb",
				neutral50: "#bbb",
				neutral60: "#ccc",
				neutral70: "#ccc",
				neutral80: "#ddd",
				neutral90: "#ddd"
			}
		})
	})] });
}
const SelectLabel = styled.label`
  font-size: 10px;
  position: absolute;
  z-index: ${z.select + 1};
  background-color: ${({ theme }) => theme.bg};
  color: ${({ theme, hasError }) => hasError ? theme.danger : theme.mcNeutral};
  font-weight: 600;
  padding: 0px 6px;
  left: 12px;
  top: -6px;
`;
const StyledSelect = styled.div`
  position: relative;
  & + & {
    margin-top: 8px;
  }
`;
//#endregion
export { Select, Select as default, StyledSelect };
