"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Select = exports.PLACEHOLDER_VALUE = void 0;
const react_1 = __importDefault(require("react"));
const css_utilities_1 = require("@shopify/css-utilities");
const InlineError_1 = require("../InlineError");
const Text_1 = require("../Text");
const Icon_1 = require("../Icon");
const Truncate_1 = require("../Truncate");
const BlockStack_1 = require("../BlockStack");
const Theme_1 = require("../Theme");
const autocomplete_1 = require("../../utilities/autocomplete");
const id_1 = require("../../utilities/id");
const errors_1 = require("../../utilities/errors");
const typography_styles_css_1 = __importDefault(require("../../utilities/typography-styles.css"));
const Select_css_1 = __importDefault(require("./Select.css"));
exports.PLACEHOLDER_VALUE = '';
const createId = id_1.createIdCreator('Select');
function Select({ id: explicitId, name, label, options, value = exports.PLACEHOLDER_VALUE, disabled, readonly, required, error, autocomplete, placeholder, onChange, }) {
    const { controls: { background: controlsBackground }, select: { labelPosition = 'inside', background: selectBackground, border = 'full', borderColor = 'base', focusBorder = 'full', disclosureIcon = 'caretDown', disclosureIconSeparator = true, typographyStyle, errorIndentation, errorTypographyStyle, }, label: { typographyStyle: labelTypographyStyle }, } = Theme_1.useThemeConfiguration();
    const id = id_1.useId(explicitId, createId);
    const background = selectBackground || controlsBackground || 'surfaceTertiary';
    const errorMarkup = error && (<span className={(errorIndentation &&
        Select_css_1.default[css_utilities_1.variationName('Error-errorIndentation', errorIndentation)],
        errorTypographyStyle && typography_styles_css_1.default[errorTypographyStyle])}>
      <InlineError_1.InlineError controlID={id}>{error}</InlineError_1.InlineError>
    </span>);
    const className = css_utilities_1.classNames(Select_css_1.default.Select, Boolean(error) && Select_css_1.default.hasError, disabled && Select_css_1.default['Select-isDisabled'], readonly && Select_css_1.default['Select-isReadOnly'], Select_css_1.default[css_utilities_1.variationName('Select-label', labelPosition)], Select_css_1.default[css_utilities_1.variationName('Select-background', background)], Select_css_1.default[css_utilities_1.variationName('Select-border', border)], Select_css_1.default[css_utilities_1.variationName('Select-borderColor', borderColor)], Select_css_1.default[css_utilities_1.variationName('Select-focusBorder', focusBorder)], typographyStyle && typography_styles_css_1.default[typographyStyle]);
    const labelMarkup = (<label className={css_utilities_1.classNames(Select_css_1.default.Label, Select_css_1.default[css_utilities_1.variationName('Label-position', labelPosition)], {
        [Select_css_1.default['Label-isPlaceholder']]: value === exports.PLACEHOLDER_VALUE && placeholder === label,
    }, Select_css_1.default[css_utilities_1.variationName('Label-onBackground', background)])} htmlFor={id}>
      <Text_1.Text size={!(value === exports.PLACEHOLDER_VALUE && placeholder === label) ||
        labelPosition === 'inside'
        ? 'small'
        : undefined} subdued style={labelTypographyStyle}>
        <Truncate_1.Truncate>{label}</Truncate_1.Truncate>
      </Text_1.Text>
    </label>);
    const view = (
    /* eslint-disable-next-line @shopify/jsx-prefer-fragment-wrappers */
    <div>
      {labelPosition === 'outside' ? labelMarkup : null}
      <div className={Select_css_1.default.Wrapper}>
        {labelPosition === 'inside' && labelMarkup}
        <select name={name} id={id} disabled={disabled} onChange={(event) => onChange === null || onChange === void 0 ? void 0 : onChange(event.target.value)} required={required} value={value} className={className} aria-describedby={error ? errors_1.errorId(id) : undefined} aria-invalid={Boolean(error)} autoComplete={autocomplete_1.autocompleteToHtml(autocomplete)}>
          {placeholder &&
        (value === exports.PLACEHOLDER_VALUE || placeholder !== label) && (<option value={exports.PLACEHOLDER_VALUE} hidden={placeholder === label} disabled>
                {placeholder === label ? <>&nbsp;</> : placeholder}
              </option>)}
          {options.map((option) => (<option key={option.value} value={option.value} disabled={option.disabled || readonly}>
              {option.label}
            </option>))}
        </select>
        <div className={css_utilities_1.classNames(Select_css_1.default.Selector, disclosureIconSeparator && Select_css_1.default['Selector-separated'], disclosureIconSeparator &&
        Select_css_1.default[css_utilities_1.variationName('Selector-borderColor', borderColor)])}>
          <Icon_1.Icon source={disclosureIcon} size="small"/>
        </div>
      </div>
    </div>);
    return (<BlockStack_1.BlockStack spacing="tight">
      {view}
      {errorMarkup}
    </BlockStack_1.BlockStack>);
}
exports.Select = Select;