globalThis = (typeof globalThis) == undefined ? globalThis : (typeof window) != undefined ? window : typeof self != undefined ? self : {};
globalThis.Charts = globalThis.Charts || {};
globalThis.Charts.UseChartExtra = 
  (function (lcjs) {
    return function UseChartExtra(chart) {
      let {
        UIDraggingModes,
        UIElementBuilders,
        ColorHEX,
        SolidFill,
        emptyFill,
        translatePoint,
        MouseStyles,
      } = lcjs;
      let _DefaultAxisX = chart.getDefaultAxisX();
      let _DefaultAxisY = chart.getDefaultAxisY();
      let _UIElements = new ElementGroupManager(chart);
      let _Context = {
        paused: false,
        period: 50,
      };
      let _Methods = {
        addText({
          text,
          color = "#fff",
          bgcolor = "#0bd",
          border = 0,
          name,
          handle,
        }) {
          bgcolor = bgcolor
            ? new SolidFill({ color: ColorHEX(bgcolor) })
            : emptyFill;
          color = color ? new SolidFill({ color: ColorHEX(color) }) : emptyFill;
          let element = chart
            .addUIElement(UIElementBuilders.TextBox)
            .setPadding({ left: 10, right: 10 })
            .setDraggingMode(UIDraggingModes.notDraggable)
            .setBackground((background) =>
              background
                .setStrokeStyle((style) => style.setThickness(border))
                .setFillStyle(bgcolor)
            )
            .setTextFillStyle(color)
            .setText(text);
          return element;
        },
        addButton({
          text,
          color = "#fff",
          bgcolor = "#113665",
          border = 0,
          name,
          handle,
        }) {
          bgcolor = bgcolor
            ? new SolidFill({ color: ColorHEX(bgcolor) })
            : emptyFill;
          color = color ? new SolidFill({ color: ColorHEX(color) }) : emptyFill;
          let button = chart
            .addUIElement(UIElementBuilders.TextBox)
            .setPadding({ top:5,bottom:5, left: 10, right: 10 })
            .setDraggingMode(UIDraggingModes.notDraggable)
            .setMouseStyle(MouseStyles.Point)
            .setBackground((bg) =>
              bg
                .setStrokeStyle((style) => style.setThickness(border))
                .setFillStyle(bgcolor)
            )
            .setTextFillStyle(color)
            .setText(text);
          button.onMouseClick(() => {
            handle && handle(button);
          });
          button.name = name;
          button.refresh = function (offset) {
            this.restore();
            if (offset == undefined) {
              offset = { x: 2, y: 2 };
              offset = translatePoint(offset, chart.pixelScale, chart.uiScale);
            }
            this.setPosition({ x: 100 - offset.x, y: 100 - offset.y });
          };
          button.set = (text,color)=>{
            button.setText(text);
            button.setBackground((bg) =>bg.setFillStyle(new SolidFill({ color: ColorHEX(color) })))
          };
          return button;
        },
      };
      let _Events = {
        PAUSED_CHANGE: new EventHandle({
          pause(){ 
            _DefaultAxisY.stop();
            return _Context.paused = true;
          },
          play(){
            _DefaultAxisY.release();
            return _Context.paused = false;
          },
        }),
        PERIOD_CHANGE: new EventHandle({
          speed: (val) => (_Context.period = val),
        }),
      };
      let _EventsMapToMethods = function () {
        Object.keys(_Events).forEach((key) => {
          let _event = _Events[key];
          var name = key
            .split("_")
            .map((s) => s[0] + s.substr(1).toLowerCase())
            .join("");
          _Methods[`on` + name] = (handle) => _event.on(handle);
          _Methods[`off` + name] = (handle) => _event.off(handle);
          Object.assign(_Methods, _event.methods);
        });
      };
      return [_Context, _Events, _Methods, _EventsMapToMethods, _UIElements];
    }
  })(arctionJS.lcjs);