import { jsxs as i, jsx as e, Fragment as P } from "react/jsx-runtime";
import { useState as c, useEffect as q, useMemo as Q, Suspense as D, createElement as I } from "react";
import { Dialog as V, DialogTitle as G, Typography as f, IconButton as H, DialogContent as J, FormControl as k, InputLabel as z, Select as W, MenuItem as w, ListItemIcon as M, Box as g, DialogActions as K, Button as v } from "@mui/material";
import b from "dayjs";
import { Close as U } from "@mui/icons-material";
import { translate as X } from "@arcblock/ux/lib/Locale/util";
import { useMemoizedFn as Y } from "ahooks";
import R from "@arcblock/icons/lib/ArrowDown";
import { useLocaleContext as Z } from "@arcblock/ux/lib/Locale/context";
import { DurationEnum as u } from "../../../@types/index.js";
import { translations as _ } from "../../libs/locales.js";
import $ from "./date-picker.js";
import { defaultButtonStyle as T, primaryButtonStyle as tt } from "../user-info/utils.js";
const B = {
  padding: "8px 16px",
  borderRadius: "8px",
  "&:hover": {
    "fieldset.MuiOutlinedInput-notchedOutline": {
      borderColor: "divider"
    }
  },
  "fieldset.MuiOutlinedInput-notchedOutline": {
    borderColor: "divider",
    borderRadius: "8px"
  },
  ".MuiSelect-select": {
    padding: "0 !important",
    display: "flex",
    alignItems: "center"
  }
};
function ht({
  open: A,
  onClose: d,
  data: p,
  selected: n,
  onSelect: m,
  timezone: E = void 0
}) {
  const { locale: O } = Z(), o = Y((t, a = {}) => X(_, t, O, "en", a)), [l, C] = c(n?.value || ""), [r, S] = c(n?.duration || ""), [s, h] = c(n?.dateRange?.[1] || ""), [j, x] = c(!1);
  q(() => {
    C(n?.value || ""), S(n?.duration || ""), h(n?.dateRange?.[1] || "");
  }, [n]);
  const F = Q(() => l && r, [l, r]), L = p.find((t) => t.id === l), N = (t) => {
    m({
      value: t.id,
      ...t.duration ? { duration: t.duration } : {}
    }), d();
  }, y = (t = !1) => {
    if (t)
      m(void 0);
    else {
      const a = b();
      m({
        value: l,
        ...r ? { duration: r } : {},
        ...r === u.Custom && s ? { dateRange: [a.toDate(), b(s).toDate()] } : {}
      });
    }
    d();
  };
  return /* @__PURE__ */ i(
    V,
    {
      open: A,
      onClose: d,
      maxWidth: "xs",
      fullWidth: !0,
      PaperProps: {
        sx: {
          borderRadius: "8px"
        }
      },
      children: [
        /* @__PURE__ */ i(G, { sx: { borderBottom: "1px solid", borderColor: "divider" }, children: [
          /* @__PURE__ */ e(f, { variant: "body1", sx: { fontSize: "16px !important", mb: 0 }, children: o("profile.setStatus") }),
          /* @__PURE__ */ e(
            H,
            {
              "aria-label": "close",
              onClick: d,
              sx: {
                position: "absolute",
                right: 8,
                top: 8,
                color: (t) => t.palette.grey[500]
              },
              children: /* @__PURE__ */ e(U, {})
            }
          )
        ] }),
        /* @__PURE__ */ i(J, { children: [
          /* @__PURE__ */ i(k, { fullWidth: !0, sx: { mt: 2 }, children: [
            /* @__PURE__ */ e(z, { size: "small", sx: { fontSize: "14px" }, children: o("profile.setStatus") }),
            /* @__PURE__ */ e(
              W,
              {
                value: l,
                label: o("profile.setStatus"),
                onChange: (t) => {
                  C(t.target.value), x(!0);
                },
                variant: "outlined",
                IconComponent: (t) => /* @__PURE__ */ e(R, { ...t, width: 20, height: 20 }),
                sx: B,
                children: p.map((t) => /* @__PURE__ */ e(w, { value: t.id, children: /* @__PURE__ */ i(D, { fallback: null, children: [
                  t.icon && /* @__PURE__ */ e(M, { style: { minWidth: "24px" }, children: I(t.icon, {
                    style: { fontSize: "16px", width: "16px", height: "16px" }
                  }) }),
                  t.name
                ] }) }, t.id))
              }
            )
          ] }),
          l ? /* @__PURE__ */ i(k, { fullWidth: !0, sx: { mt: "24px" }, children: [
            /* @__PURE__ */ e(z, { size: "small", sx: { fontSize: "14px" }, children: o("profile.removeStatusAfter") }),
            /* @__PURE__ */ e(
              W,
              {
                value: r,
                label: o("profile.removeStatusAfter"),
                onChange: (t) => {
                  const { value: a } = t.target;
                  S(a), a === u.Custom && h(b().toDate()), x(!0);
                },
                variant: "outlined",
                IconComponent: (t) => /* @__PURE__ */ e(R, { ...t, width: 20, height: 20 }),
                sx: B,
                children: L?.children?.map((t) => /* @__PURE__ */ e(w, { value: t.id, children: t.name }, t.id))
              }
            )
          ] }) : /* @__PURE__ */ i(g, { sx: { mt: "24px" }, children: [
            /* @__PURE__ */ e(
              f,
              {
                variant: "body2",
                sx: {
                  color: "text.secondary"
                },
                children: o("profile.quickSettings")
              }
            ),
            p.map((t) => /* @__PURE__ */ e(
              g,
              {
                onClick: () => N(t),
                sx: {
                  display: "flex",
                  alignItems: "center",
                  gap: "4px",
                  p: "4px",
                  cursor: "pointer",
                  borderRadius: "8px",
                  "&:hover": {
                    bgcolor: "action.hover"
                  }
                },
                children: /* @__PURE__ */ i(D, { fallback: null, children: [
                  t.icon && /* @__PURE__ */ e(M, { style: { minWidth: "24px" }, children: I(t.icon, {
                    style: { fontSize: "16px", width: "16px", height: "16px" }
                  }) }),
                  t.name,
                  t.durationName && /* @__PURE__ */ i(
                    f,
                    {
                      variant: "body2",
                      sx: {
                        color: "text.secondary"
                      },
                      children: [
                        "- ",
                        t.durationName
                      ]
                    }
                  )
                ] })
              },
              t.id
            ))
          ] }),
          r === u.Custom && /* @__PURE__ */ e(g, { sx: { mt: "24px" }, children: /* @__PURE__ */ e(
            $,
            {
              value: s,
              onChange: (t) => {
                h(t), x(!0);
              },
              label: o("profile.selectEndTime"),
              timezone: E,
              error: r === u.Custom && !s,
              helperText: r === u.Custom && !s ? o("profile.pleaseSelectTime") : void 0
            }
          ) })
        ] }),
        /* @__PURE__ */ e(K, { sx: { p: "16px 24px", borderTop: "1px solid", borderColor: "divider" }, children: n?.value && !j ? /* @__PURE__ */ e(
          v,
          {
            sx: { ...T, minWidth: "54px" },
            size: "small",
            variant: "outlined",
            onClick: () => y(!0),
            children: o("profile.cleanStatus")
          }
        ) : /* @__PURE__ */ i(P, { children: [
          /* @__PURE__ */ e(v, { size: "small", variant: "outlined", sx: { ...T, minWidth: "54px" }, onClick: d, children: o("common.cancel") }),
          /* @__PURE__ */ e(
            v,
            {
              sx: {
                ...tt,
                minWidth: "54px",
                "&.Mui-disabled": {
                  backgroundColor: "rgba(0, 0, 0, 0.12)"
                }
              },
              disabled: !F,
              onClick: () => y(!1),
              size: "small",
              variant: "outlined",
              children: o("common.confirm")
            }
          )
        ] }) })
      ]
    }
  );
}
export {
  ht as default
};
