import { jsxs as p, Fragment as V, jsx as t } from "@emotion/react/jsx-runtime";
import { useState as x, useRef as y, useMemo as H } from "react";
import * as L from "yup";
import { useAreasStore as d } from "../../../../hooks/useAreas/index.js";
import { Typography as Y } from "@m4l/base";
import { useIsMobile as B } from "@m4l/graphics";
import { ChipActionsMobile as q } from "./subcomponents/ChipActionsMobile/ChipActionsMobile.js";
import { shallow as b } from "zustand/shallow";
import { AreaChipRootStyled as K, AreaContainerChipEditButtonStyled as U, ChipAreasStyled as G, MenuActionsChipStyled as J, EditAreaChipContainerStyled as Q, EditAreaHeaderStyled as W } from "../../slots/AreasAdminSlots.js";
import { useComponentSize as X } from "../../../../../../hooks/useComponentSize/index.js";
import { useModuleDictionary as Z, useEnvironment as ee } from "@m4l/core";
import { ICONS as u } from "../../../../icons.js";
import { getAreasDictionary as i, AREAS_DICCTIONARY as a } from "../../../../dictionary.js";
import { AREAS_ADMIN_KEY_COMPONENT as te } from "../../constants.js";
import { getComponentClasses as oe } from "../../../../../../utils/getComponentSlotRoot.js";
import { createValidationSchema as re, createValidationFullObject as ne, createValidationPartialObject as ie } from "../../../../../hook-form/RHFormProvider/schema.js";
import { AreasAdminSlots as ae } from "../../slots/AreasAdminEnum.js";
import { RHFormProvider as se } from "../../../../../hook-form/RHFormProvider/RHFormProvider.js";
import { RHFTextField as le } from "../../../../../hook-form/RHFTextField/RHFTextField.js";
import { ActionsContainer as ce } from "../../../../../CommonActions/components/ActionsContainer/ActionsContainer.js";
import { Popover as me } from "../../../../../extended/mui/Popover/Popover.js";
import { ActionCancel as pe } from "../../../../../CommonActions/components/ActionCancel/ActionCancel.js";
import { ActionIntro as de } from "../../../../../CommonActions/components/ActionIntro/ActionIntro.js";
const ue = (I) => {
  const {
    areaId: o,
    selected: s,
    //disabled,
    setAnchorMenuAreas: A,
    size: f,
    color: O
  } = I, { selectArea: h, editArea: R, deleteArea: v } = d((e) => e.areasActions), C = d((e) => e.hashAreas[o].name, b), $ = d((e) => e.areasIds, b), [M, n] = x(!1), S = y(null), { currentSize: l } = X(f), E = B(), { getLabel: r } = Z(), { host_static_assets: c, environment_assets: m } = ee(), z = (e) => {
    $.length > 1 && (e.stopPropagation(), v(o));
  }, T = (e) => {
    R(o, e.inputEditArea), n(!1);
  }, w = (e) => {
    e?.stopPropagation(), n(!0);
  }, k = {
    inputEditArea: C
  }, N = H(
    () => re(ne(ie({
      inputEditArea: L.string().required(
        r(i(a.validation_edit_area))
      )
    }))),
    [r]
  ), P = (e) => {
    A && A(e.currentTarget), h(o);
  }, _ = y(null), D = (e) => {
    _.current && _.current.stop(e);
  }, g = {
    isMobile: E,
    color: O,
    size: l === "small" || l === "medium" ? l : "medium",
    isAreaSelected: s
  }, j = [
    {
      type: "menuItem",
      startIcon: `${c}/${m}/frontend/components/areas/assets/icons/${u.EDIT_AREA}`,
      label: `${r(i(a.label_edit_area))}`,
      onClick: w
    },
    {
      type: "menuItem",
      startIcon: `${c}/${m}/frontend/components/areas/assets/icons/${u.DELETE_AREA}`,
      label: `${r(i(a.label_delete_area))}`,
      onClick: z,
      color: "error"
    }
  ], F = oe(te, ae);
  return /* @__PURE__ */ p(V, { children: [
    /* @__PURE__ */ t(
      K,
      {
        role: "presentation",
        ref: S,
        onMouseUp: D,
        onClick: (e) => {
          P(e);
        },
        children: E ? /* @__PURE__ */ t(
          q,
          {}
        ) : /* @__PURE__ */ t(
          U,
          {
            children: /* @__PURE__ */ t(
              G,
              {
                opacity: !s,
                color: s ? "primary" : "default",
                ownerState: { ...g },
                onClick: () => h(o),
                size: f,
                label: `${C}`,
                endIcon: /* @__PURE__ */ t(
                  J,
                  {
                    className: F.menuActionsChip,
                    ownerState: { ...g },
                    icon: `${c}/${m}/frontend/components/window_base/assets/icons/${u.MORE_VERTICAL}`,
                    arrowType: "no-arrow",
                    anchorOrigin: { vertical: "bottom", horizontal: "right" },
                    transformOrigin: { vertical: "top", horizontal: "right" },
                    menuActions: j
                  }
                )
              }
            )
          }
        )
      }
    ),
    /* @__PURE__ */ t(
      Q,
      {
        role: "presentation",
        onClick: (e) => {
          e.stopPropagation();
        },
        children: /* @__PURE__ */ t(
          me,
          {
            arrowType: "top-center",
            open: M,
            anchorEl: S.current,
            anchorOrigin: { vertical: "bottom", horizontal: "center" },
            transformOrigin: { vertical: "top", horizontal: "center" },
            onClose: () => {
              n(!1);
            },
            children: /* @__PURE__ */ p(
              se,
              {
                onSubmit: T,
                values: k,
                validationSchema: N,
                children: [
                  /* @__PURE__ */ t(W, { children: /* @__PURE__ */ t(Y, { children: r(i(a.label_edit_area)) }) }),
                  /* @__PURE__ */ t(
                    le,
                    {
                      name: "inputEditArea"
                    }
                  ),
                  /* @__PURE__ */ p(ce, { children: [
                    /* @__PURE__ */ t(
                      pe,
                      {
                        onClick: () => {
                          n(!1);
                        },
                        variant: "outlined"
                      }
                    ),
                    /* @__PURE__ */ t(de, {})
                  ] })
                ]
              }
            )
          }
        )
      }
    )
  ] });
};
ue.displayName = "AreaButtons";
export {
  ue as AreaChip
};
