import TextAttachment from "../TextAttachment";
import Locator from "../../services/Locator";
import {createStyles} from "../../utils/styles";

const styles = createStyles({
  skin: "desktop",
  "(orientation: landscape) and (max-height: 500px)": {
    skin: "mobile"
  }
});

const STATUSBAR_STYLE = {
  dropShadow: true,
  dropShadowAlpha: 0.2,
  dropShadowBlur: 3,
  dropShadowDistance: 0,
  fill: "#ffffff",
  fontSize: 12,
  stroke: "#606060",
  strokeThickness: 1,
  fontFamily: "Oxanium, Opensans",
};

export default class StatusBar extends TextAttachment {
  constructor(inputs, options) {
    super({width: 200, height: 20}, options);
    this.justifyRight();
    this.style = STATUSBAR_STYLE;
    this._time = "10:00";
    this.text = "game_name"
  }

  set text(v) {
    this._text = v;
    this.updateIndication();
  }

  get text() {
    return this._text;
  }

  updateIndication() {
    this.textObject.text = this._text + " | " + this.getCurrentTime();
  }

  update() {
    this.updateIndication();
    super.update();
  }

  resize() {
    const cropWidthRatio = Locator.viewport.cropWidthRatio;
    if (cropWidthRatio < 0.6) {
      this.justifyCenter();
    } else if (styles.skin === "mobile") {
      this.justifyLeft();
    } else {
      this.justifyRight();
    }
    this.update();
  }

  getCurrentTime() {
    const date = new Date();
    const hours = date.getHours().toString().padStart(2, "0");
    const minutes = date.getMinutes().toString().padStart(2, "0");

    return `${hours}:${minutes}`;
  }
}
