import { jsx as r, jsxs as m } from "react/jsx-runtime";
import { gap1 as C, dFlex as N } from "./index-general.module.js";
import { classNames as p } from "./index-classNames.js";
import { translationService as H } from "./index-translation.service.js";
import { InputBase as M } from "./index-InputBase.js";
import { ComponentContainer as $ } from "./index-ComponentContainer.js";
import { Render as R } from "./index-Render.js";
import { Text as V, TextTypes as T } from "./index-Text.js";
import b, { useState as o, useRef as q, useEffect as h } from "react";
import z from "./index-Select.module.scss.js";
import G from "./index-MenuItem2.js";
const le = (a) => {
  const {
    className: U,
    options: n,
    customOptionsRenderer: s,
    value: u = "",
    adornment: g,
    testId: W,
    translateOptions: c = !0,
    valueAsDefaultValue: k = !0,
    descriptionUnderTitle: w = !1,
    ellipsis: A = !1,
    containToSelectWidth: E = !1,
    freeSolo: F = !1,
    customInputRenderer: d
  } = a, [f, I] = o(u), [v, y] = o(null), [O, j] = o(0), [D, S] = o(0), i = q(null), x = (e) => g ? g[e] : null;
  h(() => {
    if (i.current) {
      const e = i.current.clientWidth;
      j(e);
    }
  }, [i]), h(() => {
    I(u);
  }, [u]), h(() => {
    const e = n == null ? void 0 : n.find((t) => t.value === f);
    S(Number(e == null ? void 0 : e.key)), y(e || null);
  }, [f, n]);
  const _ = (e) => {
    const t = e.target.value;
    I(t);
    const l = n == null ? void 0 : n.find((B) => B.value === t);
    l && (a.onChange && a.onChange(e, l), S(Number(l == null ? void 0 : l.key)), y(l));
  };
  return r($, {
    className: p(U),
    testId: W,
    innerRef: i,
    children: r(M, {
      ...a,
      formFieldType: "Select",
      value: f,
      valueAsDefaultValue: k,
      select: !0,
      multiline: !1,
      adornment: x(D),
      triggerChangeOnStateFieldChange: !0,
      selectRenderValue: (e) => {
        if (!n)
          return "";
        const t = n.find((l) => l.value === e);
        if (d && typeof d == "function") {
          const l = t ?? {
            className: "",
            description: "",
            disabled: !1,
            key: "",
            leftImageUrl: "",
            title: "",
            value: ""
          };
          return b.createElement(d, {
            ...l,
            selectedItem: v ?? null
          });
        }
        return !t && !F ? null : c && t ? H.get(`${t.title}`).value : t ? t.title : e;
      },
      onChange: _,
      children: n && n.map((e, t) => m(G, {
        value: e.value,
        disabled: e.disabled,
        className: p(N, C),
        style: E ? {
          maxWidth: O
        } : void 0,
        children: [m(R, {
          if: !s,
          children: [x(t), e.leftImageUrl && r("img", {
            src: e.leftImageUrl,
            alt: "",
            width: "32",
            height: "24"
          }), m("div", {
            className: p(w ? z.descUnderTitle : "", N, C),
            children: [r(V, {
              type: T.text,
              translate: c,
              children: e.title
            }), e.description && r(V, {
              type: T.textHelp,
              translate: c,
              ellipsis: A,
              children: e.description
            })]
          })]
        }), r(R, {
          if: !!s,
          children: typeof s == "function" && b.createElement(s, {
            ...e,
            selectedItem: v ?? null
          })
        })]
      }, e.key ?? t))
    })
  });
};
export {
  le as Select
};
