<!--
Note that we are using a combination of styles and ngStyle inside theme object,
having `height.px` receiving a number and `background-color` receiving a HEX Color
-->

<div class="card-diagram">
  <div class="card-margin">
    <h2 class="text-hr-circuito">Workflow - Adquisiciones Febrero</h2>
    <div *ngIf="!isSecuencia" style="height: 79.7vh;">
      <h3 class="text-circuito">Agregar nuevo proceso</h3>
      <mat-accordion multi>
        <mat-expansion-panel [expanded]="true" class="panel-bg">
          <mat-expansion-panel-header>
            <mat-panel-title>
              Seleccionar proceso
            </mat-panel-title>
          </mat-expansion-panel-header>
          <mat-form-field appearance="legacy" class="w-100">
            <mat-label class="text-white">Proceso</mat-label>
            <mat-select [(ngModel)]="procesoSeleccionado" name="food" (selectionChange)="cambioProceso()"
              [disabled]="!canUpdate">
              <ng-container *ngFor="let proceso of procesos">
                <mat-option [value]="proceso.id">
                  {{proceso.name}}
                </mat-option>
              </ng-container>
            </mat-select>
          </mat-form-field>
        </mat-expansion-panel>
        <br>
        <mat-expansion-panel [expanded]="true" class="panel-bg">
          <mat-expansion-panel-header>
            <mat-panel-title>
              Seleccionar personal
            </mat-panel-title>
          </mat-expansion-panel-header>
          <mat-form-field appearance="legacy" class="w-100">
            <mat-label class="text-white">Personal</mat-label>
            <mat-select [(ngModel)]="empleadoSeleccionado" name="food" (selectionChange)="cambioEmpleado()"
              [disabled]="!canUpdate">
              <mat-option *ngFor="let empleado of empleados" [value]="empleado.id">
                {{empleado.name}}
              </mat-option>
            </mat-select>
          </mat-form-field>
          <section class="checkbox-section">
            <mat-checkbox class="checkbox-margin" [(ngModel)]="hasNotificaciones" (change)="cambioNotificaciones()">
              Enviar notificación</mat-checkbox>
          </section>
        </mat-expansion-panel>
        <br>
        <mat-expansion-panel [expanded]="true" class="panel-bg">
          <mat-expansion-panel-header>
            <mat-panel-title>
              Seleccionar forma
            </mat-panel-title>
          </mat-expansion-panel-header>
          <ejs-symbolpalette id="symbolpalette" [expandMode]="expandMode" [palettes]="palettes" [symbolHeight]="85"
            [symbolWidth]="85" [symbolMargin]="symbolMargin" [getSymbolInfo]="getSymbolInfo" width="330px"
            height="25vh">
          </ejs-symbolpalette>
        </mat-expansion-panel>
      </mat-accordion>
    </div>
    <div *ngIf="!isSecuencia">
      <button mat-raised-button class="button-block-circuito" (click)="validarSecuencia()">
        Generar circuito de validación
      </button>
      <button mat-raised-button class="button-block" (click)="validarSecuencia()">
        Secuencia de validación
      </button>
    </div>
    <div *ngIf="isSecuencia && !loading">
      <div class="card-data">
        <h3 class="text-circuito">Secuencia de validación</h3>
        <cdk-virtual-scroll-viewport appendOnly itemSize="50" class="data-viewport">
          <div class="item_secuencia">
            <span>Proceso</span>
            <span>Secuencia</span>
          </div>
          <mat-divider></mat-divider>
          <div class="item_secuencia">
            <span>#Inicio flujo</span>
          </div>
          <div *ngFor="let secuencia of procesos_secuencia; let i = index">
            <div class="item_secuencia">
              <span>&nbsp;&nbsp;&nbsp;{{ secuencia.content }} </span>
              <span><b>{{ getNumeroSecuencia(secuencia.content) }}</b></span>
            </div>
            <div class="item_secuencia">
              <span>&nbsp;&nbsp;&nbsp;{{ secuencia.content }} </span>
              <span><b>{{ getNumeroSecuencia(secuencia.content) }}</b></span>
            </div>
            <div class="item_secuencia">
              <span>&nbsp;&nbsp;&nbsp;{{ secuencia.content }} </span>
              <span><b>{{ getNumeroSecuencia(secuencia.content) }}</b></span>
            </div>
            <div class="item_secuencia">
              <span>&nbsp;&nbsp;&nbsp;{{ secuencia.content }} </span>
              <span><b>{{ getNumeroSecuencia(secuencia.content) }}</b></span>
            </div>
          </div>
          <div class="item_secuencia">
            <span>#Fin flujo</span>
          </div>
        </cdk-virtual-scroll-viewport>
        <br />
      </div>
      <button mat-raised-button class="button-block" (click)="getDiagram()">
        Circuito de validaciones
      </button>
    </div>
  </div>
  <ejs-diagram id="diagram" #diagram width="100%" height="920px" mode="SVG" class="card-diagram-margin"
    [getConnectorDefaults]="getConnectorDefaults" [getNodeDefaults]="nodesDefault" (dragEnter)="dragEnter($event)"
    (connectionChange)="connectionChange($event)" (click)="clickNode($event)" (created)="created()"
    (collectionChange)="collectionChange($event)">
    <e-nodes>

      <e-node id="nota" [height]="170" [width]="500" [offsetX]="1250" [offsetY]="85" [shape]="shape_process"
        [constraints]="notaConstraints">
        <e-node-annotations>
          <e-node-annotation [style]="{color: 'white'}" content="Nota importante"></e-node-annotation>
        </e-node-annotations>
      </e-node>

      <e-node id="0" [height]="60" [width]="130" [offsetX]="450" [offsetY]="30" [shape]="shape_inicio"
        [constraints]="nodeConstraints" [addInfo]="{
            secuence: 0, entries: 0, outputs: 0,
            numbersBefore: 0, numbersAfter: 0,
            notify: true, process: 0, employee: 1, 
            isNode: true, canUpdate: false
          }">
        <e-node-annotations>
          <e-node-annotation [style]="{color: 'white'}" content="Iniciar proceso 0"></e-node-annotation>
        </e-node-annotations>
      </e-node>
      <!-- 
      <e-node id="1" [height]="60" [width]="130" [offsetX]="450" [offsetY]="170" [shape]="shape_data"
        [constraints]="nodeConstraints" [addInfo]="{
            secuence: 10, entries: 0, outputs: 1,
            numbersBefore: 0, numbersAfter: 5,
            notify: false, process: 1, employee: 2, 
            isNode: true, canUpdate: false
          }">
        <e-node-annotations>
        <e-node-annotation [style]="{color: 'white'}" content="Validar 1"></e-node-annotation>
        </e-node-annotations>
      </e-node>

       <e-node id="7" [height]="60" [width]="130" [offsetX]="450" [offsetY]="330" [shape]="shape_process"
        [constraints]="nodeConstraints" [addInfo]="{
            secuence: 30, entries: 1, outputs: 0,
            numbersBefore: 5, numbersAfter: 0,
            notify: true, process: 7, employee: 3, 
            isNode: true, canUpdate: false
          }">
        <e-node-annotations>
          <e-node-annotation [style]="{color: 'white'}" content="Aprobar solicitud 7"></e-node-annotation>
        </e-node-annotations>
      </e-node>

      <e-node id="8" parentId="7" [height]="60" [width]="130" [offsetX]="150" [offsetY]="470" [shape]="shape_process"
        [constraints]="nodeConstraints" [addInfo]="{
            secuence: 31, entries: 0, outputs: 0,
            numbersBefore: 0, numbersAfter: 0,
            notify: true, process: 8, employee: 1, 
            isNode: true, canUpdate: false
          }">
        <e-node-annotations>
          <e-node-annotation [style]="{color: 'white'}" content="Rechazado 8"></e-node-annotation>
        </e-node-annotations>
      </e-node>

      <e-node id="9" parentId="7" [height]="60" [width]="130" [offsetX]="450" [offsetY]="470" [shape]="shape_process"
        [constraints]="nodeConstraints" [addInfo]="{
            secuence: 32, entries: 0, outputs: 1,
            numbersBefore: 0, numbersAfter: 5,
            notify: false, process: 9, employee: 2, 
            isNode: true, canUpdate: false
          }">
        <e-node-annotations>
          <e-node-annotation [style]="{color: 'white'}" content="Pendiente de aprobación 9"></e-node-annotation>
        </e-node-annotations>
      </e-node>

      <e-node id="15" parentId="7" [height]="60" [width]="130" [offsetX]="750" [offsetY]="470" [shape]="shape_process"
        [constraints]="nodeConstraints" [addInfo]="{
            secuence: 33, entries: 0, outputs: 1,
            numbersBefore: 0, numbersAfter: 5, 
            notify: true, process: 15, employee: 3, 
            isNode: true, canUpdate: false
          }">
        <e-node-annotations>
          <e-node-annotation [style]="{color: 'white'}" content="Aprobado 15"></e-node-annotation>
        </e-node-annotations>
      </e-node> -->

      <e-node id="21" [height]="60" [width]="130" [offsetX]="450" [offsetY]="670" [shape]="shape_fin"
        [constraints]="nodeConstraints" [addInfo]="{
            secuence: 100, entries: 3, outputs: 0,
            numbersBefore: 3, numbersAfter: 0,
            notify: true, process: 1000, employee: 1, 
            isNode: true, canUpdate: false
          }">
        <e-node-annotations>
          <e-node-annotation [style]="{color: 'white'}" content="Fin 21"></e-node-annotation>
        </e-node-annotations>
      </e-node>
    </e-nodes>

<!--     <e-connectors>
      <e-connector id="connector1" sourceID="0" targetID="1" sourcePortID='port3-node0' targetPortID='port1-node1'
        [constraints]="connectorConstraints"></e-connector>

      <e-connector id="connector2" sourceID="1" targetID="7" sourcePortID='port3-node1' targetPortID='port1-node7'>
      </e-connector>

      <e-connector id="connector3" type="Orthogonal" sourceID="7" targetID="8" sourcePortID='port4-node7'
        targetPortID='port1-node8' [constraints]="connectorConstraints"></e-connector>

      <e-connector id="connector4" type="Orthogonal" sourceID="7" targetID="9" sourcePortID='port3-node7'
        targetPortID='port1-node9' [constraints]="connectorConstraints"></e-connector>

      <e-connector id="connector5" type="Orthogonal" sourceID="7" targetID="15" sourcePortID='port2-node7'
        targetPortID='port1-node15' [constraints]="connectorConstraints"></e-connector>

      <e-connector id="connector6" type="Orthogonal" sourceID="8" targetID="21" sourcePortID='port3-node8'
        targetPortID='port4-node21' [constraints]="connectorConstraints"></e-connector>

      <e-connector id="connector7" type="Orthogonal" sourceID="9" targetID="21" sourcePortID='port3-node9'
        targetPortID='port1-node21'></e-connector>

      <e-connector id="connector8" type="Orthogonal" sourceID="15" targetID="21" sourcePortID='port3-node15'
        targetPortID='port2-node21'></e-connector>
    </e-connectors>  -->
  </ejs-diagram>
</div>