import {
  createWidget,
  widget,
  align,
  updateStatusBarTitle,
  event,
} from "@zos/ui";
import { log as Logger, px } from "@zos/utils";
import { push } from "@zos/router";
import {
  DEFAULT_COLOR,
  DEFAULT_COLOR_TRANSPARENT,
} from "../../utils/config/constants";
import { DEVICE_WIDTH } from "../../utils/config/device";
import VisLog from "@silver-zepp/vis-log";
const vis = new VisLog("index.js");

const logger = Logger.getLogger("ZeppSpace");
const { messageBuilder } = getApp()._options.globalData;

let spaces = {};

Page({
  state: {},
  build() {
    updateStatusBarTitle("Spaces (Loading)");
    this.fetchData();
  },

  fetchData() {
    messageBuilder
      .request({
        method: "GET_DIRECTORY",
      })
      .then((data) => {
        vis.log("data received");
        const statusSuccess = data["success"];
        if (!statusSuccess) {
          return;
        }

        let spaceNames = Object.fromEntries(
          Object.entries(data["result"]).sort(([a], [b]) => a.localeCompare(b)),
        );

        let yPos = 70;
        for (let key in spaceNames) {
          if (spaceNames.hasOwnProperty(key)) {
            spaces[key] = createWidget(widget.TEXT, {
              x: 0,
              y: px(yPos),
              w: px(DEVICE_WIDTH),
              h: px(50),
              align_h: align.CENTER_H,
              align_v: align.CENTER_V,
              text_size: px(32),
              color: 0xffffff,
              text: key,
            });

            spaces[key].addEventListener(event.CLICK_UP, (info) => {
              push({
                url: "pages/status/index",
                params: {
                  name: key,
                  url: spaceNames[key],
                },
              });
            });

            yPos += 50;
          }
        }

        updateStatusBarTitle("Spaces");
      });
  },
});