import { createTextVNode as _createTextVNode, createVNode as _createVNode } from "vue";
import "./styles/device-status-bar.css";
import { computed, onBeforeUnmount, ref, unref } from "vue";
import { convertToUnit } from "@veno-ui/utils";
import { genericComponent } from "../../utils";
import { makeTagProps } from "../../composables/tag";
import { makeColorProps, useColor } from "../../composables/color";
const DeviceStatusBar = genericComponent()({
  name: "VeDeviceStatusBar",
  props: {
    height: {
      type: Number,
      default: 20
    },
    battery: {
      type: Number,
      default: 100
    },
    operator: {
      type: String,
      default: "Z+"
    },
    ...makeTagProps(),
    ...makeColorProps()
  },
  setup(props) {
    function getClockValue() {
      const now = /* @__PURE__ */ new Date();
      const hour = now.getHours();
      const minute = now.getMinutes();
      return `${hour >= 12 ? "\u4E0B\u5348" : "\u4E0A\u5348"}${Math.abs(hour - 12)}:${String(minute).padStart(2, "0")}`;
    }
    const clock = ref(getClockValue());
    const clockTimer = setInterval(() => {
      clock.value = getClockValue();
    }, 1e3);
    onBeforeUnmount(() => {
      clearInterval(clockTimer);
    });
    const {
      colorClasses,
      colorStyles
    } = useColor(computed(() => {
      const {
        textColor,
        color
      } = unref(props);
      return {
        background: color,
        text: textColor
      };
    }));
    return () => {
      return _createVNode(props.tag, {
        "class": ["ve-device-status-bar", colorClasses.value],
        "style": [{
          height: convertToUnit(props.height)
        }, colorStyles.value]
      }, {
        default: () => [_createVNode("div", {
          "class": "ve-device-status-bar__clock"
        }, [clock.value]), _createVNode("div", {
          "class": "ve-device-status-bar__mobile-signal"
        }, [[...Array(4)].map((_) => _createVNode("div", null, null))]), _createVNode("div", {
          "class": "ve-device-status-bar__mobile-operator"
        }, [props.operator]), _createVNode("div", {
          "class": "ve-device-status-bar__wifi-signal"
        }, [[...Array(3)].map((_) => _createVNode("div", null, null))]), _createVNode("div", {
          "class": "ve-device-status-bar__spacer"
        }, null), _createVNode("div", {
          "class": "ve-device-status-bar__battery-percentage"
        }, [props.battery, _createTextVNode("%")]), _createVNode("div", {
          "class": "ve-device-status-bar__battery"
        }, [_createVNode("div", {
          "style": {
            width: `${props.battery}%`
          }
        }, null)])]
      });
    };
  }
});
export {
  DeviceStatusBar
};
//# sourceMappingURL=device-status-bar.mjs.map
