"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AccessibleSelect = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const AccessibleSelect = ({ label, id, options = [], placeholder, helperText, error, isRequired = false, isDisabled = false, isSearchable = false, onChange, className = '', ...props }) => {
    // Generate an ID if not provided
    const selectId = id || `select-${Math.random().toString(36).substring(2, 9)}`;
    const hasError = !!error;
    const helperTextId = helperText ? `${selectId}-helper-text` : undefined;
    const errorId = error ? `${selectId}-error` : undefined;
    const ariaDescribedBy = [helperTextId, errorId].filter(Boolean).join(' ') || undefined;
    // Styling classes
    const selectContainerClasses = [
        'relative w-full',
        className
    ].filter(Boolean).join(' ');
    const labelClasses = [
        'block mb-1 font-medium text-gray-700',
        isRequired ? 'required' : '',
    ].filter(Boolean).join(' ');
    const selectClasses = [
        'w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 appearance-none',
        hasError ? 'border-red-500 text-red-900' : 'border-gray-300',
        isDisabled ? 'bg-gray-100 cursor-not-allowed opacity-50' : '',
    ].filter(Boolean).join(' ');
    const helperTextClasses = 'mt-1 text-sm text-gray-600';
    const errorTextClasses = 'mt-1 text-sm text-red-600';
    // Dropdown indicator
    const DropdownIndicator = () => ((0, jsx_runtime_1.jsx)("div", { className: "absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none", children: (0, jsx_runtime_1.jsx)("svg", { className: "w-5 h-5 text-gray-400", viewBox: "0 0 20 20", fill: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", clipRule: "evenodd" }) }) }));
    // Format options to ensure they have consistent structure
    const formattedOptions = options.map(opt => {
        if (typeof opt === 'string') {
            return { label: opt, value: opt };
        }
        return opt;
    });
    return ((0, jsx_runtime_1.jsxs)("div", { className: selectContainerClasses, children: [label && ((0, jsx_runtime_1.jsxs)("label", { htmlFor: selectId, className: labelClasses, children: [label, isRequired && (0, jsx_runtime_1.jsx)("span", { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" })] })), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsxs)("select", { id: selectId, disabled: isDisabled, required: isRequired, "aria-invalid": hasError ? 'true' : 'false', "aria-describedby": ariaDescribedBy, "aria-label": !label ? props['aria-label'] : undefined, onChange: onChange, className: selectClasses, ...props, children: [placeholder && ((0, jsx_runtime_1.jsx)("option", { value: "", disabled: true, children: placeholder })), formattedOptions.map((option, index) => ((0, jsx_runtime_1.jsx)("option", { value: option.value, disabled: option.isDisabled, children: option.label }, option.value || index)))] }), (0, jsx_runtime_1.jsx)(DropdownIndicator, {})] }), helperText && !error && ((0, jsx_runtime_1.jsx)("div", { id: helperTextId, className: helperTextClasses, children: helperText })), error && ((0, jsx_runtime_1.jsx)("div", { id: errorId, role: "alert", className: errorTextClasses, children: error })), isSearchable && ((0, jsx_runtime_1.jsx)("div", { className: "mt-1 text-xs text-gray-500", children: "(This is a simplified select. A real implementation would use a custom dropdown for searchable functionality)" }))] }));
};
exports.AccessibleSelect = AccessibleSelect;
exports.default = exports.AccessibleSelect;
//# sourceMappingURL=AccessibleSelect.js.map