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';
export const StyledSelect = styled.select(props => {
    const { readOnly } = props;
    const { base, components: { 'form-control': { 'foreground-color': fg, 'background-color': backgroundColor }, select } } = props.theme;
    const foreground = encodeURIComponent(fg);
    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});

    /* cspell:disable-next-line */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25' fill='${foreground}'%3E%3Cpath d='M12.1476563,16.5726562 C12.1476563,16.5726562 3.2875,9.72421875 3.2875,9.72421875 C3.2875,9.72421875 3.14375,9.58046875 3.14375,9.58046875 C3.04765625,9.3890625 3,9.19765625 3,9.00546875 C3,9.00546875 3,9.00546875 3,9.00546875 C3,8.33515625 3.33515625,8 3.9578125,8 C3.9578125,8 3.9578125,8 3.9578125,8 C4.1015625,8 4.29296875,8.09609375 4.628125,8.2390625 C4.628125,8.2390625 4.628125,8.2390625 4.628125,8.2390625 C4.628125,8.2390625 12.8179688,14.2257813 12.8179688,14.2257813 C12.8179688,14.2257813 21.103125,8.19140625 21.103125,8.19140625 C21.3421875,8.04765625 21.534375,8 21.678125,8 C21.678125,8 21.678125,8 21.678125,8 C22.3007813,8 22.6359375,8.33515625 22.6359375,9.00546875 C22.6359375,9.00546875 22.6359375,9.00546875 22.6359375,9.00546875 C22.6359375,9.196875 22.5882813,9.38828125 22.4921875,9.58046875 C22.4921875,9.58046875 22.4921875,9.58046875 22.4921875,9.58046875 C22.4921875,9.58046875 22.3484375,9.72421875 22.3484375,9.72421875 C22.3484375,9.72421875 13.4882812,16.525 13.4882812,16.525 C13.296875,16.7164063 13.0570312,16.8125 12.8179688,16.8125 C12.8179688,16.8125 12.8179688,16.8125 12.8179688,16.8125 C12.5789062,16.8125 12.3867188,16.7164062 12.1476563,16.5734375 C12.1476563,16.5734375 12.1476563,16.5734375 12.1476563,16.5734375 L12.1476563,16.5726562 Z'/%3E%3C/svg%3E");
    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']});

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

    ${!props.status &&
        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, 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