import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {SemaphoreList} from '../../model/semaphore-list';
import {Semaphore} from '../../model/semaphore';
import {Format} from '../../model/format';

@Component({
  selector: 'app-column-advanced-display',
  templateUrl: './column-advanced-display.component.html',
  styleUrls: ['./column-advanced-display.component.css']
})
export class ColumnAdvancedDisplayComponent implements OnInit {

    @Input('semaphoreArr') semaphoreArr: SemaphoreList;
    @Input('inputSemaphoreName') inputSemaphoreName: String;
    @Input('addNew') addNew: boolean;
    @Input('columnName') columnName: String;
    @Output() completed = new EventEmitter<any>();
    semaphoreObjArr: {}[];
    semaphore: Semaphore;
    outPutValues: {};
    newSemaphore: {};
    rangeColors = [
        {index: 0, value: '#00FFFF', title: 'Aqua'},
        {index: 1, value: '#000000', title: 'Black'},
        {index: 2, value: '#0000FF', title: 'Blue'},
        {index: 3, value: '#FF00FF', title: 'Fuchsia'},
        {index: 4, value: '#808080', title: 'Gray'},
        {index: 5, value: '#008000', title: 'Green'},
        {index: 6, value: '#00FF00', title: 'Lime'},
        {index: 7, value: '#800000', title: 'Maroon'},
        {index: 8, value: '#000080', title: 'Navy'},
        {index: 9, value: '#808000', title: 'Olive'},
        {index: 10, value: '#FF9900', title: 'Orange'},
        {index: 11, value: '#800080', title: 'Purple'},
        {index: 12, value: '#FF0000', title: 'Red'},
        {index: 13, value: '#C0C0C0', title: 'Silver'},
        {index: 14, value: '#008080', title: 'Teal'},
        {index: 15, value: '#FFFFFF', title: 'White'},
        {index: 16, value: '#FFFF00', title: 'Yellow'},
        {index: 17, value: '', title: 'Default'}
    ];
    fontFamily = [
        {index: 0, value: 'Arial,Helvetica,sans-serif', title: 'Arial'},
        {index: 1, value: 'Courier New,Courier,mono', title: 'Courier'},
        {index: 2, value: 'Geneva,Arial,Helvetica,sans-serif', title: 'Geneva'},
        {index: 3, value: 'Georgia,Times New Roman,Times,serif', title: 'Georgia'},
        {index: 4, value: 'Times New Roman,Times,serif', title: 'Times'},
        {index: 5, value: 'Verdana,Arial,Helvetica,sans-serif', title: 'Verdana'},
        {index: 6, value: '', title: 'Default'}
    ];

  constructor() {
      this.semaphoreObjArr = new Array();
      this.outPutValues = new Object();
      this.newSemaphore = new Object();
  }
  ngOnInit() {
      if (this.addNew) {
            this.addNewDisplay();
      } else {
          for (let semCtr = 0; semCtr < this.semaphoreArr.semaphore.length; semCtr++) {
              if (this.inputSemaphoreName === this.semaphoreArr.semaphore[semCtr]['semaphoreName']) {
                  this.semaphore = this.semaphoreArr.semaphore[semCtr];
              }
          }
      }
  }

    saveDisplayData() {
      this.outPutValues['semList'] = this.semaphoreArr;
      this.outPutValues['semId'] = this.semaphore.semaphoreId;
      this.outPutValues['setCloseDisplay'] = false;
      this.outPutValues['semName'] = this.semaphore.semaphoreName;
      this.completed.emit(this.outPutValues);
    }

    addNewFormat() {
        let formatCnt = 0;
        if ( this.semaphore.formatList.format.length > 0) {
               formatCnt = this.semaphore.formatList.format.length + 1;
          } else { formatCnt = 1; }
      this.semaphore.formatList.format.push({
          bgColor: '',
          bold: false,
          expression: '',
          fontColor: '',
          fontFace: '',
          fontSize: '18',
          italic: false,
          lessThanValue: '',
          underline: false,
          formatId: this.semaphore.semaphoreId + '_fmt' + formatCnt
      });
    }

    setStyle(format: Format) {
        const style = {
            'background-color': format.bgColor,
            'color': format.fontColor,
            'fontSize': format.fontSize + 'px',
            'font-weight': format.bold ? 'bold' : 'normal',
            'font-style': format.italic ? 'italic' : 'normal',
            'font-family': format.fontFace
        };
        return style;
    }

    deleteFormat(format: Format) {
        const index = this.semaphore.formatList.format.findIndex(d => d === format);
        this.semaphore.formatList.format.splice(index, 1);
    }

    addNewDisplay() {
      let semCount = 0;
      if ( this.semaphoreArr !== null && this.semaphoreArr.semaphore.length > 0 ) {
         semCount = this.semaphoreArr.semaphore.length + 1;
      } else { semCount = 1 ; }
      this.newSemaphore['comment'] = this.columnName;
      this.newSemaphore['semaphoreType'] = 'CELL';
      this.newSemaphore['semaphoreName'] = 'Display Formatting ' + semCount;
      this.newSemaphore['semaphoreId'] = 'sem' + semCount;
      this.newSemaphore['formatList'] = {
           format: new Array({
               bgColor: '',
               bold: false,
               expression: '',
               fontColor: '',
               fontFace: '',
               fontSize: 18,
               italic: false,
               lessThanValue: '',
               underline: false,
               formatId: this.newSemaphore['semaphoreId'] + '_fmt1'
           })
      };
      this.semaphoreArr.semaphore.push(<Semaphore>this.newSemaphore);
        for (let semCtr = 0; semCtr < this.semaphoreArr.semaphore.length; semCtr++) {
            if (this.semaphoreArr.semaphore[semCtr]['semaphoreId'] === this.newSemaphore['semaphoreId']) {
                this.semaphore = this.semaphoreArr.semaphore[semCtr];
            }
        }
    }



}