import { jsx as e, jsxs as l } from "react/jsx-runtime";
import t from "../filepicker/FilePicker.js";
import r from "../button/Button.js";
import v from "../../utils/classNames.js";
const w = (c) => {
  const {
    bannerRef: d,
    bannerStyle: p,
    analyticsDateRangeLabel: o,
    loadedCsvName: i,
    showOverlayDetails: n,
    showOverlayLabelText: s,
    isDragging: y,
    onCsvPick: g,
    onToggleOverlayDetails: h,
    onToggleOverlayLabelText: m,
    onClearCsv: x,
    onDragHandleDown: b
  } = c;
  return /* @__PURE__ */ e(
    "div",
    {
      ref: d,
      className: "position-fixed rounded padding-x-10 padding-y-10 text-color-white bg-secondary shadow-focused pointer-events-all z-index-max",
      style: p,
      children: /* @__PURE__ */ l("div", { className: "display-flex align-items-center gap-10", children: [
        /* @__PURE__ */ e(
          "span",
          {
            role: "button",
            tabIndex: 0,
            "aria-label": "Drag analytics overlay banner",
            className: v(
              "rioglyph rioglyph-drag-n-drop text-size-20 margin-top-2",
              y ? "cursor-grabbing" : "cursor-grab"
            ),
            onPointerDown: b
          }
        ),
        /* @__PURE__ */ l("div", { children: [
          !i && /* @__PURE__ */ e(
            t,
            {
              displayMode: t.DISPLAY_MODE_DROPZONE,
              onPick: g,
              accept: {
                "text/csv": [".csv"],
                "application/vnd.ms-excel": [".csv"]
              },
              children: ({ isDragActive: a }) => /* @__PURE__ */ e(
                "div",
                {
                  className: "rounded border border-style-dashed border-color-white bg-transparent text-center text-color-white padding-y-10 padding-x-15 cursor-pointer",
                  children: a ? "Drop analytics CSV here ..." : "Drop analytics CSV here, or click to select"
                }
              )
            }
          ),
          i && /* @__PURE__ */ l("div", { className: "display-flex align-items-center justify-content-center gap-15", children: [
            /* @__PURE__ */ l("div", { className: "line-height-14 display-flex flex-column gap-2", children: [
              o && /* @__PURE__ */ e("div", { className: "text-bold", children: o }),
              /* @__PURE__ */ e("div", { children: i })
            ] }),
            /* @__PURE__ */ l("div", { className: "display-flex gap-5", children: [
              /* @__PURE__ */ e(
                r,
                {
                  bsSize: "xs",
                  bsStyle: "muted-filled",
                  iconOnly: !0,
                  onClick: (a) => {
                    a.preventDefault(), a.stopPropagation(), h();
                  },
                  "aria-label": n ? "Hide analytics overlay details" : "Show analytics overlay details",
                  children: /* @__PURE__ */ e(
                    "span",
                    {
                      className: `rioglyph ${n ? "rioglyph-eye-open" : "rioglyph-eye-closed"}`
                    }
                  )
                }
              ),
              /* @__PURE__ */ e(
                r,
                {
                  bsSize: "xs",
                  bsStyle: "muted-filled",
                  iconOnly: !0,
                  onClick: (a) => {
                    a.preventDefault(), a.stopPropagation(), m();
                  },
                  "aria-label": s ? "Hide analytics label text" : "Show analytics label text",
                  children: /* @__PURE__ */ e(
                    "span",
                    {
                      className: `rioglyph rotate-90 ${s ? "rioglyph-arrows-collapse" : "rioglyph-arrows-expand"}`
                    }
                  )
                }
              ),
              /* @__PURE__ */ e(
                r,
                {
                  bsSize: "xs",
                  bsStyle: "muted-filled",
                  iconName: "rioglyph-trash",
                  iconOnly: !0,
                  onClick: (a) => {
                    a.preventDefault(), a.stopPropagation(), x();
                  }
                }
              )
            ] })
          ] })
        ] })
      ] })
    }
  );
};
export {
  w as AnalyticsAnalysisBanner
};
//# sourceMappingURL=AnalyticsAnalysisBanner.js.map
