import "../../../lib/easeljs.js";
import Colors from "./colors";
import $ from "jquery";

function Panel(panel, isDualTilt, scale = 10, treatCoordinatesAsCenterpoints = true) {
  this.Container_constructor();
  this.panel = panel;
  this.isDualTilt = isDualTilt;
  this.textOverlays = {};
  this.selected = false;
  this.scale = scale;
  this.treatCoordinatesAsCenterpoints = treatCoordinatesAsCenterpoints;
  this.setup();
}

const panelMethods = {
  setup() {
    if (this.treatCoordinatesAsCenterpoints) {
      this.x = (this.panel.x - (this.panel.width / 2.0)) * this.scale;
      this.y = (this.panel.y - (this.panel.height / 2.0)) * this.scale;
    } else {
      this.x = this.panel.x  * this.scale;
      this.y = this.panel.y  * this.scale;
    }
    this.width = this.scale * this.panel.width;
    this.height = this.scale * this.panel.height;
    this.drawBackground();
  },

  drawBackground() {
    if (this.background === undefined) {
      this.background = new createjs.Shape();
    } else {
      this.removeChild(this.background);
    }
    let fillColor;
    let borderColor;
    let textColor;
    let secondFillColor;
    if (this.panel.data.seismic_anchors > 0 && this.panel.data.wind_anchors > 0) {
      fillColor = Colors.seismic_background;
      secondFillColor = Colors.wind_background;
      textColor = Colors.dark_text;
      borderColor = Colors.border;
    } else if (this.panel.data.seismic_anchors > 0) {
      fillColor = Colors.seismic_background;
      textColor = Colors.dark_text;
      borderColor = Colors.border;
    } else if (this.panel.data.wind_anchors > 0) {
      fillColor = Colors.wind_background;
      textColor = Colors.dark_text;
      borderColor = Colors.border;
    } else {
      fillColor = Colors.default_background;
      textColor = Colors.light_text;
      borderColor = fillColor;
    }

    if (this.selected) {
      fillColor = Colors.selected_background;
      textColor = Colors.dark_text;
      borderColor = Colors.border;
    }

    this.textColor = textColor;

    let width = this.width;
    let height = this.height;

    let borderWidth = 0.5;

    // main background fill rectangle with white border
    this.background.graphics.setStrokeStyle(borderWidth)
      .beginStroke('white')
      .beginFill(fillColor)
      .drawRect(0, 0, width, height)
      .endFill()
      .endStroke();

    // diagonal split background color for multiple anchor types
    if (secondFillColor !== undefined) {
      this.background.graphics.beginFill(secondFillColor)
        .moveTo(borderWidth, borderWidth)
        .lineTo(width - borderWidth, height - borderWidth)
        .lineTo(width - borderWidth, borderWidth)
        .closePath()
        .endFill()
        .endStroke();
    }

    // inner border for use with light background colors
    this.background.graphics.beginStroke(borderColor)
      .drawRect(borderWidth, borderWidth, width - 2 * borderWidth, height - 2 * borderWidth)
      .endStroke();

    // line drawing of dual-tilt indicator (the right-facing triangle)
    if (this.isDualTilt) {
      this.background.graphics.setStrokeStyle(0.25)
        .beginStroke(Colors.border)
        .moveTo(width / 2., borderWidth)
        .lineTo(width / 2., height - borderWidth)
        .lineTo(width - borderWidth, height / 2.)
        .closePath()
        .endStroke();
    }
    this.addChildAt(this.background, 0);
  },

  select() {
    this.selected = true;
    this.drawBackground();
    this.redrawOverlays();
  },

  deselect() {
    this.selected = false;
    this.drawBackground();
    this.redrawOverlays();
  },

  setOverlay(overlay) {
    let data = this.panel.data;
    let self = this;
    $.each(this.textOverlays, function (idx, overlay) {
      self.removeChild(overlay);
    });
    this.textOverlays = {};
    if (overlay == "ALL") {
      this.addOverlay('panel_id', data.panel_id, "2.5px", 0.3, 0.55);
      this.addOverlay('wind_zones', data.wind_zones, '2.5px', 0.7, 0.55);
      this.addOverlay('ballast', data.ballast, "1.5px", 0.125, 0.25);
      this.addOverlay('wind_anchors', data.wind_anchors, "1.5px", 0.125, 0.8);
      this.addOverlay('seismic_anchors', "S".repeat(data.seismic_anchors), "1.5px", 0.35, 0.8);
      this.addOverlay('cross_trays', data.cross_trays, "1.5px", 0.6, 0.25);
      this.addOverlay('link_trays', data.link_trays, "1.5px", 0.85, 0.25);
      this.addOverlay('subarray', data.subarray, "1.5px", 0.6, 0.8);
      this.addOverlay('psf', data.psf.toPrecision(3), "1.5px", 0.35, 0.25);
      this.addOverlay('panel_type', data.panel_type, "1.5px", 0.85, 0.8);
    } else if (overlay == 'ANCHOR') {
      this.addOverlay('ballast', data.ballast, "2.5px", 0.3, 0.55);
      this.addOverlay('anchors', data.seismic_anchors + data.wind_anchors, '2.5px', 0.7, 0.55);
    }
    this.currentOverlay = overlay;
  },

  addOverlay(name, text, fontSize, relativeX, relativeY) {
    let overlay = new createjs.Text();
    overlay.text = text;
    overlay.font = fontSize + " sans-serif";
    overlay.x = this.width * relativeX;
    overlay.y = this.height * relativeY;
    overlay.textAlign = "center";
    overlay.textBaseline = "middle";
    overlay.color = this.textColor;
    overlay.maxWidth = this.width * 0.5;
    this.textOverlays[name] = overlay;
    this.addChild(overlay);
  },

  redrawOverlays() {
    this.setOverlay(this.currentOverlay);
  }
};

Object.assign(Panel.prototype, createjs.extend(Panel, createjs.Container));
Object.assign(Panel.prototype, panelMethods);
Panel = createjs.promote(Panel, "Container");

export {Panel};