<template>
  <modal
    type="modal-load-program"
    :title="'modal_load_program_lbl_title_window' | localize('Selezione programma')"
  >
    <button class="close" slot="header-buttons" @click="close()">
      <i class="fa fa-remove"></i>
    </button>
    <div class="modal-load-program-header">
      <!-- <div class="title">
                        <i class="fa fa-chevron-left"></i>
                    Selezione programma da aggiungere in coda
      </div>-->
      <div class="box-search">
        <div class="path" v-if="!showZoomedImage">
          <div class="child" v-for="(bread,key) in this.breadcrumbs" :key="key">
            <div v-if="bread.name && key!=0">
              <i class="fa fa-chevron-right"></i>
            </div>
            <a
              href="#"
              @click="navigateTo(bread.path,bread.path,isLocalNavigation, 1,1)"
            >{{bread.name}}</a>
          </div>
          <!-- <div class="root">PC</div>
                        <div v-if="true"><i class="fa fa-chevron-right"></i></div>
                        <div class="child">Cliente A</div>
                        <div v-if="true"><i class="fa fa-chevron-right"></i></div>
          <div class="child">Part Program 01</div>-->
        </div>
        <div class="path" v-if="showZoomedImage">{{selectedFile.AbsolutePath}}</div>
      </div>
    </div>
    <div class="modal-load-program-body">
      <div class="first-column" :class="{blur:mustCLeanPProgram}">
        <card-folder-path
          name="CNC"
          :iconType="'DATABASE'"
          :selected="'\\\\' == currentDrive"
          :disabled="!isCnReady()"
          @click="navigateTo('\\\\','\\\\', false, 1,0)"
        ></card-folder-path>
        <hr>
        <card-folder-path
          name="Recent"
          :iconType="'SPFO'"
          :selected="currentDrive == recentPath"
          @click="navigateTo(recentPath, recentPath, true, 1, 0)"
        ></card-folder-path>
        <hr>
        <card-folder-path
          v-for="(val, key) in this.driveList"
          :key="key"
          :name="val.Name"
          :iconType="val.Type"
          :selected="val.Path == currentDrive"
          @click="navigateTo(val.Path, val.Path, true, 1,0)"
        ></card-folder-path>
      </div>
      <div class="second-column" :class="{blur:mustCLeanPProgram}" v-if="navigationDepth <1"></div>
      <div class="second-column" :class="{blur:mustCLeanPProgram}" v-if="navigationDepth >=1">
        <div class="group-btn">
          <input
            type="text"
            v-model="currentFilterFirst"
            :placeholder="'modal_load_program_search_placeholder' | localize('Cerca un programma per nome')"
          >
          <i class="fa fa-2x fa-search"></i>
        </div>
        <div class="content scrollable">
          <card-folder-path
            v-for="(val,key) in this.firstColumnData.filter(t => t.Name.toLowerCase().indexOf(currentFilterFirst.toLowerCase()) >=0)"
            :key="key"
            :name="val.Name"
            :disabled="(!isCnReady() && !isLocalNavigation) || !val.FileExist"
            :class="{dark: val.AbsolutePath == lastClickPath}"
            :selected="isInPath(val.AbsolutePath,val.IsDirectory) || val.AbsolutePath == lastClickPath"
            :withArrow="val.IsDirectory == true"
            :iconType="val.IsDirectory? 'FOLDER':'FILE'"
            :fileExist="val.FileExist"
            @click="val.IsDirectory ? navigateTo(val.Path, val.AbsolutePath, isLocalNavigation, 2,1): fileInfo(val.AbsolutePath, val.IsJob, 1)"
          ></card-folder-path>
        </div>
      </div>
      <div class="third-column" :class="{blur:mustCLeanPProgram}" v-if="navigationDepth <2"></div>
      <div class="third-column" :class="{blur:mustCLeanPProgram}" v-if="navigationDepth >=2">
        <!-- !(this.arrayViewList[1] ? this.arrayViewList[1].length < 1 : false) -->
        <div class="group-btn">
          <input
            type="text"
            v-model="currentFilterSecond"
            :placeholder="'modal_load_program_search_placeholder' | localize('Cerca un programma per nome')"
          >
          <i class="fa fa-2x fa-search"></i>
        </div>
        <div class="label-folder-empty" v-if="secondColumnData.length ==0">
          <label>{{'modal_load_program_empty_folder' | localize("Cartella vuota")}}</label>
        </div>
        <div class="content scrollable" v-if="secondColumnData.length >0">
          <card-folder-path
            v-for="val in (this.secondColumnData.filter(t => t.Name.toLowerCase().indexOf(currentFilterSecond.toLowerCase()) >=0))"
            :key="val.Name"
            :name="val.Name"
            :disabled="!isCnReady() && !isLocalNavigation"
            :class="{dark: val.AbsolutePath == lastClickPath}"
            :selected="isInPath(val.AbsolutePath,val.IsDirectory) || val.AbsolutePath == lastClickPath"
            :withArrow="val.IsDirectory == true"
            :iconType="val.IsDirectory? 'FOLDER':'FILE'"
            @click="val.IsDirectory? navigateTo(val.Path, val.AbsolutePath, isLocalNavigation, 2, 2) : fileInfo(val.AbsolutePath, val.IsJob, 2) "
          ></card-folder-path>
          <!-- <card-folder-path name="Cliente A" @click="selectItem()" :with-arrow="false"></card-folder-path>-->
        </div>
      </div>
      <div class="selected-item" :class="{blur: fileIsChanged}" v-if="selectedFile">
        <div class="selected-item-header" :class="{blur: fileIsChanged}">
          <div>
            <label class="selected-item-title">{{selectedFile.Name}}</label>
            <div class="subtitle">
              <label
                class="title"
              >{{'modal_load_program_creation_date' | localize("Creation Date:")}}</label>
              <label class="text">{{getDate(selectedFile.CreationDate)}}</label>
              <label
                class="title"
              >{{'modal_load_program_last_change_date' | localize("Last Change Date:")}}</label>
              <label class="text">{{getDate(selectedFile.LastModDate)}}</label>
            </div>
          </div>
          <div class="group-button">
            <button class="btn" v-if="false">
              <i class="fa fa-clone"></i>
            </button>
            <button class="btn" :disabled="!selectedFile.CanEdit" @click="editprogram">
              <i class="fa fa-pencil-square-o"></i>
            </button>
          </div>
        </div>
             
        <div class="selected-item-body" v-if="!selectedFile.IsJob" :class="{blur:fileIsChanged}">
          <div class="selected-item-body-image">
            <div v-if="selectedFile.PreviewBase64" class="container" @click="ToggleShowZoomedImage">
              <img :src="selectedFile.PreviewBase64">
              <div class="eye">
                <i class="fa fa-eye" aria-hidden="true"></i>
              </div>
            </div>
            <div
              v-else
              class="noimage"
            >{{'modal_load_program_lbl_img_not_found' | localize('Preview non disponibile')}}</div>
          </div>
          <div class="selected-item-body-description scrollable">
            <div class="row" v-for="(item,index) in selectedFile.Content" :key="'line' + index">
              <label>{{item}}</label>
            </div>
          </div>
        </div>
        <div class="selected-item-body" v-if="selectedFile && selectedFile.IsJob" :class="{blur:fileIsChanged}">
          <div class="box-image" v-if="selectedFileMetadata.generics.images.length > 0">
            <div class="box-image-container">
              <img :src="selectedFileMetadata.generics.images[selectedNumberImage].base64">
            </div>
            <div class="linenumber">
              <div v-for="(n,i) in selectedFileMetadata.generics.images" :key="i">
                <button
                  :class="{'target': i == selectedNumberImage}"
                  @click="selectNumberImage(i)"
                >{{i+1}}</button>
              </div>
            </div>
          </div>
          <div v-else class="selected-item-body-image">
            <div
              class="noimage"
            >{{'modal_load_program_lbl_img_not_found' | localize('Preview non disponibile')}}</div>
          </div>
          <div
            class="box-description"
            v-if="selectedFileMetadata.generics.description"
          >{{selectedFileMetadata.generics.description}}</div>
        </div>
      </div>
      <div :class="{'selected-item-blur': mustCLeanPProgram}" class="selected-item" v-if="!selectedFile">
        <div class="notselecteditem">
          <label>{{'modal_load_program_lbl_box_select_program' | localize('Seleziona programma')}}</label>
        </div>
      </div>
      <zoom-image
        v-if="showZoomedImage && selectedFile && selectedFile.PreviewBase64" :class="{blur:mustCLeanPProgram}"
        @close="ToggleShowZoomedImage"
        :imageSrc="selectedFile.PreviewBase64"
      />

      <div class="fileIsChanged" v-if="fileIsChanged">
        {{'modal_load_program_lbl_file_is_changed' | localize('Il file è stato modificato')}}
        <div>
            <button
                class="btn"
                @click="reloadProgram()"
            >{{'modal_load_program_btn_reload_file' | localize('Ricarica')}}
            </button>
        </div>
      </div>
      <div class="cleanTempFolder" v-if="mustCLeanPProgram">
        {{'modal_load_program_lbl_tempfolder_not_ok' | localize('La cartella temporanea di CMS Active è stata modificata da altri software')}}
        <div>
            <button
                class="btn"
                @click="cleanTempfolder()"
            >{{'modal_load_program_btn_delete_all_files' | localize('Elimina tutti i file nella cartella')}}
            </button>
            <button
                class="btn"
                @click="backupTempfolder()"
            >{{'modal_load_program_btn_Backup_all_files' | localize('Backup dei file e pulizia della cartella')}}
            </button>
        </div>
      </div>

      <div class="ask-confirm" v-if="askConfirmLayer">
        {{'modal_load_program_lbl_ask_confirm' | localize('Ci sono dei file che sono stati spostati o eliminati, caricare comunque?')}}
        <div>
            <button
                class="btn"
                @click="askConfirmCancelClick()"
            >{{'userinfo_btn_cancel' | localize('Annulla')}}
            </button>
            <button
                class="btn"
                @click="askConfirmOkClick()"
            >{{'modal_load_program_btn_upload_program' | localize('Carica e attiva programma')}}
            </button>
        </div>
      </div>
    </div>

    <div class="modal-load-program-footer">
      <div class="togglebutton" v-if="this.isLocalNavigation && !recentDriveSelected">
        <label>
          {{'modal_load_program_lbl_upload_all_files' | localize('Upload all files in selected folder')}}
          <input
            type="checkbox"
            :checked="uploadAllFileInFolder"
            @click="toggleUploadAllFileInFolder()"
          >
          <span class="toggle">{{uploadAllFileInFolder? onLabel : offLabel}}</span>
        </label>
      </div>

      <button
        class="btn btn-success"
        :disabled="!selectedFile || !isCnReady() || loadClicked"
        v-if="!this.isLocalNavigation"
        @click="load(selectedFile)"
      >{{'modal_load_program_btn_load_program' | localize('Attiva programma')}}</button>
      <button
        class="btn btn-success"
        :disabled="!selectedFile || !isCnReady() || fileIsChanged || !canLoadProgram || loadClicked"
        v-if="this.isLocalNavigation"
        @click="load(selectedFile)"
      >{{'modal_load_program_btn_upload_program' | localize('Carica e attiva programma')}}</button>
    </div>
  </modal>
</template>
<script src="./modal-load-program.ts" lang="ts"></script>
