import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from 'react';
import styled, { css } from 'styled-components';
import { mix } from 'polished';
import { defaultThemeProp } from '../../theme';
import FormField from '../FormField';
import { StyledFormControl } from '../FormControl';
import { useDirection, useI18n, useTestIds, useUID } from '../../hooks';
import VisuallyHiddenText from '../VisuallyHiddenText';
import { withTestIds } from '../../utils';
import { getSelectTestIds } from './Select.test-ids';
const getSelectArrowSvg = (color) => 
// cspell:disable-next-line
`url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25' fill='${encodeURIComponent(color)}'%3E%3Cpath d='M21 8v2.75l-8.5 6.5-8.5-6.5V8l8.5 6.5z'/%3E%3C/svg%3E")`;
export const StyledSelect = styled.select(props => {
    const { readOnly, hasStatus } = props;
    const { base, components: { 'form-control': { 'foreground-color': fg, 'background-color': backgroundColor }, select } } = props.theme;
    const { rtl } = useDirection();
    return css `
    appearance: none;
    -webkit-appearance: none;
    overflow-x: hidden;
    text-overflow: ellipsis;
    width: 100%;
    height: ${select.height};
    min-height: ${base['hit-area']['mouse-min']};
    padding-inline-start: ${select.padding};
    padding-inline-end: calc(4 * ${base.spacing});
    background-image: ${getSelectArrowSvg(fg)};
    background-repeat: no-repeat;
    background-size: calc(2 * ${base.spacing}) auto;
    background-position: ${rtl ? base.spacing : `calc(100% - ${base.spacing}) `} 60%;
    border-width: ${select['border-width']};
    border-radius: calc(${base['border-radius']} * ${select['border-radius']});

    @media (forced-colors: active) {
      background-image: ${getSelectArrowSvg('CanvasText')};
    }

    ${readOnly &&
        css `
      background-image: none;
    `}

    ${!hasStatus &&
        css `
      border-color: ${select['border-color']};
    `}

    &:has(option[value='']:checked, option:not([value]):checked) {
      color: ${mix(base.transparency['transparent-3'], fg, backgroundColor)};
    }

    & option {
      color: ${fg};

      &[value=''],
      &:not([value]) {
        color: ${mix(base.transparency['transparent-3'], fg, backgroundColor)};
      }
    }

    &::-ms-expand {
      display: none;
    }

    @media (pointer: coarse) {
      min-height: ${base['hit-area']['finger-min']};
    }
  `;
});
StyledSelect.defaultProps = defaultThemeProp;
const Select = forwardRef(function Select(props, ref) {
    const uid = useUID();
    const t = useI18n();
    const { testId, additionalInfo, children, id = uid, label, labelHidden, info, status, required = false, disabled = false, readOnly = false, actions, onResolveSuggestion, ...restProps } = props;
    const testIds = useTestIds(testId, getSelectTestIds);
    const Comp = (_jsx(StyledFormControl, { "data-testid": testIds.control, ...restProps, as: StyledSelect, hasSuggestion: status === 'pending' && !!onResolveSuggestion, id: id, hasStatus: !!status, status: status, required: required, disabled: disabled, label: label, readOnly: readOnly, ref: ref, onMouseDown: readOnly
            ? (e) => {
                e.preventDefault();
            }
            : undefined, onKeyDown: readOnly
            ? (e) => {
                // TODO: Consideration is needed for key modifiers, e.g. "ctrl p"
                if (!['Escape', 'Tab', 'Space'].includes(e.key))
                    e.preventDefault();
            }
            : undefined, children: children }));
    return label ? (_jsx(FormField, { testId: testIds, label: _jsxs(_Fragment, { children: [label, readOnly && _jsx(VisuallyHiddenText, { children: ` ${t('read_only')}` })] }), labelHidden: labelHidden, id: id, info: info, status: status, required: required, disabled: disabled, readOnly: readOnly, actions: actions, onResolveSuggestion: onResolveSuggestion, additionalInfo: additionalInfo, children: Comp })) : (Comp);
});
export default withTestIds(Select, getSelectTestIds);
//# sourceMappingURL=Select.js.map