import { jsx as t, jsxs as r, Fragment as S } from "react/jsx-runtime";
import { useState as T, useRef as V, isValidElement as v } from "react";
import i from "prop-types";
import { TableFilter as ue, TableViewCol as pe } from "mui-datatables";
import he, { PrintContextConsumer as me } from "react-to-print";
import { MoreVert as fe, CloudDownload as be, ViewColumn as Ce, FilterList as ge, Print as $ } from "@mui/icons-material";
import { Popover as xe, Tooltip as D, IconButton as R, ListItemIcon as L, ListItemText as j, MenuItem as U, Menu as we, LinearProgress as ye, useTheme as Te, useMediaQuery as ve } from "@mui/material";
import { useDeepCompareEffect as Re } from "ahooks";
import { handleCSVDownload as ke } from "./utils.js";
import Fe from "./TableSearch.js";
import { useDatatableContext as Pe } from "./DatatableContext.js";
import { styled as z } from "../Theme/index.js";
function Ie() {
  const s = Te();
  return ve(s.breakpoints.down("sm"));
}
function Be({ ...s }) {
  const [f, d] = T(null), k = V(null), F = Ie(), N = V(Math.random().toString(32).slice(2)), [O, A] = T(!1), { customPreButtons: b, customButtons: C, loading: u, disabled: g } = Pe(), {
    data: Q = [],
    options: o,
    components: p = {},
    columns: P,
    filterList: G = [],
    filterData: H = [],
    filterUpdate: J,
    resetFilters: K,
    updateFilterByType: W,
    toggleViewColumn: X,
    updateColumns: Y,
    title: I = "",
    searchText: Z = null,
    searchTextUpdate: _,
    searchClose: ee
  } = s, [B, h] = T({}), te = o.customToolbar ? o.customToolbar(s) : "", { search: oe, downloadCsv: ie, print: m, viewColumns: ne, filterTable: le } = o.textLabels.toolbar, re = o.search === !1 || o.search === "false", x = o.print === !1 || o.print === "false", se = p.TableFilter || ue, ae = p.TableViewCol || pe;
  Re(() => {
    (u || g) && h({});
  }, [u, g]);
  const q = (e) => /* @__PURE__ */ t(he, { content: () => s.tableRef(), children: /* @__PURE__ */ t(me, { children: e }) }), w = (e) => `toolbar-pop-${N.current}-${e}`, a = [];
  o.download === !1 || o.download === "false" || a.push({
    icon: /* @__PURE__ */ t(be, {}),
    title: ie,
    onClick: () => {
      ke(s);
    }
  }), o.viewColumns === !1 || o.viewColumns === "false" || a.push({
    icon: /* @__PURE__ */ t(Ce, {}),
    title: ne,
    // eslint-disable-next-line react/no-unstable-nested-components
    popRender() {
      return /* @__PURE__ */ t(
        ae,
        {
          data: Q,
          columns: P,
          options: o,
          onColumnUpdate: X,
          updateColumns: Y,
          components: p
        }
      );
    }
  }), o.filter === !1 || o.filter === "false" || a.push({
    icon: /* @__PURE__ */ t(ge, {}),
    title: le,
    // eslint-disable-next-line react/no-unstable-nested-components
    popRender() {
      return /* @__PURE__ */ t(
        se,
        {
          customFooter: o.customFilterDialogFooter,
          columns: P,
          options: o,
          filterList: G,
          filterData: H,
          onFilterUpdate: J,
          onFilterReset: K,
          updateFilterByType: W,
          components: p
        }
      );
    }
  });
  const E = [...b, !x, ...a, ...C].filter((e) => !!e).length > 1 && F, M = [], ce = [...b, ...a, ...C].map((e, c) => {
    if (v(e))
      return e;
    const n = w(c);
    if (e.icon) {
      const { popRender: l, icon: y } = e;
      return l && M.push(
        /* @__PURE__ */ t(
          xe,
          {
            open: !!B[n],
            anchorEl: () => B[n],
            onClose: () => {
              h({});
            },
            anchorOrigin: {
              vertical: "bottom",
              horizontal: "right"
            },
            children: /* @__PURE__ */ t("div", { children: l() })
          },
          n
        )
      ), /* @__PURE__ */ t(D, { title: e.title, children: /* @__PURE__ */ t(
        R,
        {
          "data-testid": `${e.title}-iconButton`,
          id: `btn-${n}`,
          "aria-label": e.title,
          onClick: () => {
            e.onClick && e.onClick(), l && h({
              [n]: document.getElementById(`btn-${n}`)
            });
          },
          children: /* @__PURE__ */ t("div", { className: "custom-toolbar-icon", children: y })
        }
      ) }, n);
    }
    return e;
  }), de = [...b, ...a, ...C].map((e, c) => {
    const n = w(c);
    let l;
    if (v(e))
      l = e;
    else if (e.icon) {
      const { icon: y } = e;
      l = /* @__PURE__ */ r(S, { children: [
        /* @__PURE__ */ t(L, { children: y }),
        /* @__PURE__ */ t(j, { children: e.title })
      ] });
    }
    return /* @__PURE__ */ t(
      U,
      {
        onClick: () => {
          d(null), e.onClick && e.onClick(), e.popRender && h({
            [n]: k.current
          });
        },
        children: l
      },
      n
    );
  });
  return /* @__PURE__ */ r("div", { children: [
    /* @__PURE__ */ r(qe, { children: [
      /* @__PURE__ */ t(
        "div",
        {
          className: `custom-toobar-title ${F && O && v(I) ? "toobar-title-hidden" : ""}`,
          children: /* @__PURE__ */ t("div", { className: "custom-toobar-title-inner", children: /* @__PURE__ */ t("span", { children: I }) })
        }
      ),
      /* @__PURE__ */ r("div", { className: `custom-toobar-btns ${u || g ? "toobar-btns-disabled" : ""}`, children: [
        !re && /* @__PURE__ */ t(
          Fe,
          {
            search: oe,
            options: o,
            searchText: Z,
            searchTextUpdate: _,
            searchClose: ee,
            onSearchOpen: A
          }
        ),
        !E && /* @__PURE__ */ r(S, { children: [
          !x && q(({ handlePrint: e }) => /* @__PURE__ */ t("span", { children: /* @__PURE__ */ t(D, { title: m, children: /* @__PURE__ */ t(
            R,
            {
              "data-testid": `${m}-iconButton`,
              "aria-label": m,
              disabled: o.print === "disabled",
              onClick: e,
              children: /* @__PURE__ */ t($, {})
            }
          ) }) })),
          ce
        ] }),
        E && /* @__PURE__ */ t(
          R,
          {
            ref: k,
            "aria-haspopup": "true",
            "aria-expanded": f ? "true" : void 0,
            onClick: (e) => d(e.currentTarget),
            style: { flexShrink: 0 },
            children: /* @__PURE__ */ t(fe, {})
          }
        )
      ] }),
      te
    ] }),
    /* @__PURE__ */ r(
      we,
      {
        anchorEl: f,
        open: !!f,
        onClose: () => d(null),
        slotProps: {
          list: {
            "aria-labelledby": "more-button"
          }
        },
        children: [
          !x && q(({ handlePrint: e }) => /* @__PURE__ */ r(
            U,
            {
              onClick: () => {
                d(null), e();
              },
              children: [
                /* @__PURE__ */ t(L, { children: /* @__PURE__ */ t($, { fontSize: "small" }) }),
                /* @__PURE__ */ t(j, { children: m })
              ]
            }
          )),
          de
        ]
      }
    ),
    M.map((e, c) => /* @__PURE__ */ t("div", { children: e }, w(c))),
    /* @__PURE__ */ t(Ee, { children: u && /* @__PURE__ */ t(ye, { className: "toolbar-progress" }) })
  ] });
}
Be.propTypes = {
  data: i.array,
  options: i.object.isRequired,
  components: i.object,
  columns: i.array.isRequired,
  filterList: i.array,
  filterData: i.array,
  filterUpdate: i.func.isRequired,
  resetFilters: i.func.isRequired,
  updateFilterByType: i.func.isRequired,
  toggleViewColumn: i.func.isRequired,
  updateColumns: i.func.isRequired,
  title: i.any,
  searchText: i.any,
  searchTextUpdate: i.func.isRequired,
  searchClose: i.func.isRequired,
  tableRef: i.func.isRequired
};
const qe = z("div")`
  display: flex;
  align-items: center;
  height: 56px;
  .custom-toobar-title {
    position: relative;
    flex: 1;
    font-size: 18px;
    font-weight: 800;
    height: 56px;
    transition: all ease 0.3s;
    &-inner {
      line-height: 56px;
      width: 100%;
      height: 56px;
      position: absolute;
      left: 0;
      top: 0;
      span {
        display: inline-block;
        max-width: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }
  .custom-toobar-btns {
    display: flex;
    justify-content: center;
    align-items: center;
    &.toobar-btns-disabled {
      position: relative;
      opacity: 0.5;
      &:after {
        position: absolute;
        display: block;
        z-index: 2;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        content: '';
        cursor: not-allowed;
      }
    }
    .custom-toolbar-icon {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 24px;
      height: 24px;
      font-size: 20px;
      overflow: hidden;
    }
  }
  .toobar-title-hidden {
    opacity: 0;
    cursor: none;
  }
`, Ee = z("div")`
  width: 100%;
  height: 2px;
  .toolbar-progress {
    height: 2px;
  }
`;
export {
  Be as default
};
