import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access */
import { FilledInput, FormControl, InputAdornment, InputLabel, NativeSelect, } from '@mui/material';
import { ThemeProvider, useTheme } from '@mui/material/styles';
import cx from 'classnames';
import { useEffect, useState } from 'react';
import { Controller, } from 'react-hook-form';
import Icon from '../Icon';
import Tooltip from '../Tooltip';
import { selectFieldTheme } from './SelectFieldTheme';
import './styles.scss';
export default function SelectField({ className, attr, label, createdForm, disabled, title, placeholder, options = [], required, allowEmpty = true, endAdornment, defaultEndAdornments = ['close'], showEndAdornment = true, onRemove, onChange, infoText, }) {
    const fieldName = attr;
    const outerTheme = useTheme();
    const [active, setActive] = useState(false);
    const [focus, setFocus] = useState(false);
    const [mouseOver, setMouseOver] = useState(false);
    const hasError = () => !!createdForm.formState.errors[attr];
    const getClassNames = cx('ds-select-text', className, {
        disabled: disabled,
    });
    useEffect(() => {
        if (focus || mouseOver) {
            setActive(true);
        }
        else {
            setActive(false);
        }
    }, [focus, mouseOver]);
    const getEndAdornmentIcon = (value) => {
        const adornments = [];
        if (defaultEndAdornments.length > 0) {
            if (defaultEndAdornments.includes('info') && infoText) {
                const infoTextElement = (_jsx(Icon, { name: "info", size: "small", className: `icon-info pointer ${disabled ? 'd-none' : ''}` }));
                adornments.push(_jsx(Tooltip, { title: infoText, mode: "simple", children: _jsx("span", { children: infoTextElement }) }, "info"));
            }
            if (defaultEndAdornments.includes('close') &&
                value !== undefined &&
                onRemove) {
                adornments.push(_jsx(Icon, { name: "close", size: "small", className: `${disabled ? 'd-none' : ''} pointer`, onClick: () => onRemove && onRemove() }, "close"));
            }
        }
        if (endAdornment && endAdornment.length > 0) {
            adornments.push(...endAdornment);
        }
        if (adornments.length === 0) {
            return null;
        }
        if (adornments.length === 1) {
            return adornments[0];
        }
        return _jsx("div", { className: "ds-end-adornments", children: adornments });
    };
    return (_jsx("div", { className: getClassNames, children: _jsx(Controller, { name: fieldName, control: createdForm.control, render: ({ field }) => (_jsxs(ThemeProvider, { theme: selectFieldTheme(outerTheme, {
                    hasLabel: !!label,
                    hasAddornments: !!endAdornment,
                }), children: [_jsxs(FormControl, { fullWidth: true, variant: "filled", disabled: disabled, children: [label && (_jsx(InputLabel, { htmlFor: `${attr}-select`, shrink: true, sx: {
                                    color: disabled
                                        ? '#BEBFC1'
                                        : hasError()
                                            ? '#C6080A'
                                            : active
                                                ? '#1C83F4'
                                                : '#000000',
                                }, children: `${label}${required ? ' *' : ''}` })), _jsxs(NativeSelect, { ...field, id: `${attr}-select`, value: field.value ?? '', fullWidth: true, required: required, disabled: disabled, variant: "filled", onFocus: () => setFocus(true), onBlur: () => setFocus(false), onMouseOver: () => setMouseOver(true), onMouseOut: () => setMouseOver(false), onChange: (event) => {
                                    const value = event.target.value;
                                    field.onChange(value);
                                    onChange && onChange(attr, value || null);
                                }, input: _jsx(FilledInput, { endAdornment: showEndAdornment && (_jsx(InputAdornment, { position: "end", children: getEndAdornmentIcon(field.value) })), sx: {
                                        borderColor: disabled
                                            ? '#BEBFC1'
                                            : hasError()
                                                ? '#C6080A!important'
                                                : active
                                                    ? '#1C83F4!important'
                                                    : '#BEBFC1!important',
                                        backgroundColor: disabled
                                            ? '#BEBFC1!important'
                                            : '#FFFFFF!important',
                                    } }), children: [allowEmpty && (_jsx("option", { value: "", children: placeholder || '\u00a0' })), options.map((option, idx) => (_jsx("option", { value: option.value, children: option.label }, idx.valueOf())))] })] }), title && !hasError() && _jsx("div", { className: "helper", children: title }), hasError() && (_jsx("div", { className: "helper error", children: String(createdForm.formState.errors[attr]?.message) }))] })) }) }));
}
