<template>
  <div>
    <CTitleBanner title="Operazioni sul Server:"></CTitleBanner>

    <q-separator></q-separator>

    <div
      class="q-gutter-sm q-list--bordered center_img"
      style="max-width: 600px"
    >
      <q-btn-toggle
        v-model="mydir"
        v-if="myarroptionsdir"
        class="my-custom-toggle"
        no-caps
        rounded
        unelevated
        toggle-color="primary"
        color="white"
        text-color="primary"
        :options="myarroptionsdir"
      />

      <q-separator></q-separator>
      <br />

      <div class="q-ma-sm button-container">
        <div class="" v-for="(script, index) in myarrscript" :key="index">
          <q-btn
            v-if="!script.sock"
            class=""
            :label="script.label"
            color="primary"
            @click="
              EseguiScript(
                `admin_scripts/${mydir.replace(/ /g, '\\ ')}/${script.value}`
              )
            "
          >
          </q-btn>
          <q-btn
            v-if="script.sock"
            class=""
            :label="'SOCK: ' + script.label"
            color="positive"
            @click="
              startScript(
                `admin_scripts/${mydir.replace(/ /g, '\\ ')}/${script.value}`
              )
            "
          >
          </q-btn>
          <q-field
            v-if="script.description"
            class="col-8 custom-field"
            outlined
            color="blue-6"
          >
            {{ script.description }}
          </q-field>
        </div>
        <br />
      </div>
    </div>

    <div v-if="dnsCheckMySite && !incaricamento">
      <q-btn
        class=""
        :label="'Controllo DNS sito ' + tools.getDomainSite()"
        color="positive"
        @click="checkDNSSite"
      >
      </q-btn>
      <div v-if="dnsPageActive && arrEmails" class="q-ma-md">
        <q-list bordered class="rounded-borders" style="max-width: 600px">
          <q-item-label header>Caselle di Posta:</q-item-label>

          <q-btn
            label="Aggiungi Nuova Casella"
            color="primary"
            @click="showNewEmail = true"
            class="q-my-sm"
          ></q-btn>

          <div v-if="arrEmails.length === 0">
            <span style="color: red; font-weight: bold"
              >Nessuna casella di posta creata</span
            >
          </div>

          <q-item v-for="(email, index) in arrEmails" :key="index">
            <q-item-section avatar top>
              <q-icon name="email" color="black" size="34px" />
            </q-item-section>

            <q-item-section top class="col-2 gt-sm">
              <q-item-label class="q-mt-sm">{{
                email.slice(0, email.indexOf("@"))
              }}</q-item-label>
            </q-item-section>

            <q-item-section top>
              <q-item-label lines="1">
                <span class="text-weight-medium">{{ email }}</span>
                <span class="text-grey-8"></span>
              </q-item-label>
              <q-item-label
                lines="1"
                class="q-mt-xs text-body2 text-weight-bold text-primary text-uppercase"
              >
                <span class="cursor-pointer">Leggi Email</span>
              </q-item-label>
            </q-item-section>

            <q-item-section top side>
              <div class="text-grey-8 q-gutter-xs">
                <q-btn
                  class="gt-xs"
                  size="12px"
                  flat
                  dense
                  round
                  icon="delete"
                  @click="removeEmails(email)"
                />
                <q-btn
                  class="gt-xs"
                  size="12px"
                  flat
                  dense
                  round
                  icon="edit"
                  @click="
                    emailSel = email;
                    showchangePwd = true;
                  "
                />
                <!--<q-btn size="12px" flat dense round icon="more_vert" />-->
              </div>
            </q-item-section>
          </q-item>
        </q-list>
      </div>
      <div v-if="rischeckDNS" v-html="rischeckDNS"></div>
      <q-btn
        v-if="errorDNS"
        class=""
        :label="'Correggi sito ' + tools.getDomainSite()"
        color="negative"
        @click="setCorrectIpsOnDNS"
      >
      </q-btn>
    </div>

    <div v-if="dnsPageActive" class="">
      <div>
        <q-select
          v-model="selectedApi"
          :options="optionsApi"
          label="Seleziona un Token"
          emit-value
          map-options
          filled
          class="q-ma-md"
        />
        <q-select
          v-if="optZones && optZones.length > 0"
          v-model="selZoneId"
          :options="optZones"
          label="Seleziona un Dominio"
          emit-value
          map-options
          class="q-ma-md"
        />

        <q-table
          v-if="arrDNS && selZoneId"
          :title="`Zona di ${getNameBySelZoneinId()}`"
          :rows="arrDNS"
          :columns="columnsDNS"
          row-key="id"
          :loading="incaricamento"
          :pagination="pagination"
          :selected-rows-label="getSelectedString"
          selection="single"
          v-model:selected="selected"
          :visible-columns="viscolumnsDNS"
        >
          <template v-slot:loading>
            <q-inner-loading showing color="primary" />
          </template>
          <template v-slot:body="props">
            <q-tr
              :props="props"
              :class="{ 'selected-row': props.selected }"
              @click="toggleSelect(props.row)"
            >
              <q-td auto-width class="tdclass">
                <q-checkbox
                  dense
                  v-model="props.selected"
                  @click.stop="toggleSelect(props.row)"
                ></q-checkbox>
              </q-td>
              <q-td
                v-for="col in viscolumnsDNS"
                :key="col.name"
                :props="props"
                style="max-width: 240px; white-space: pre-wrap; overflow: auto"
              >
                <q-popup-edit
                  v-if="col.name === 'content'"
                  v-model="props.row.content"
                  v-slot="scope"
                  buttons
                  transition-show="scale"
                  transition-hide="scale"
                  max-width="200"
                  @save="saveContentDNS"
                >
                  <q-input
                    type="textarea"
                    v-model="scope.value"
                    dense
                    autofocus
                    :maxlength="255"
                    autogrow
                  />
                </q-popup-edit>
                <q-popup-edit
                  v-if="col.name === 'name'"
                  v-model="props.row.name"
                  v-slot="scope"
                  buttons
                  @save="saveNameDNS"
                >
                  <q-input
                    type="textarea"
                    v-model="scope.value"
                    autofocus
                    autogrow
                  />
                </q-popup-edit>
                <q-btn
                  v-if="col.name === 'delete'"
                  icon="delete"
                  color="negative"
                  dense
                  size="sm"
                  @click="delRecordDNS(props.row)"
                >
                </q-btn>
                <q-popup-edit
                  v-if="col.name === 'priority'"
                  v-model="props.row.priority"
                  v-slot="scope"
                  buttons
                  @save="savePriorityDNS"
                >
                  <q-input
                    type="textarea"
                    v-model="scope.value"
                    autofocus
                    autogrow
                  />
                </q-popup-edit>
                <q-popup-edit
                  v-if="col.name === 'ttl'"
                  v-model="props.row.ttl"
                  v-slot="scope"
                  buttons
                  @save="saveTTLDNS"
                >
                  <q-input
                    type="textarea"
                    v-model="scope.value"
                    autofocus
                    autogrow
                  />
                </q-popup-edit>

                <!--<q-popup-edit
                  v-if="col.name === 'type'"
                  v-model="props.row.type"
                  v-slot="scope"
                  buttons
                  @save="saveTypeDNS"
                >
                  <q-input
                    type="textarea"
                    v-model="scope.value"
                    autofocus
                    autogrow
                  />
                </q-popup-edit>-->

                <q-toggle
                  v-if="col.name === 'proxied'"
                  v-show="props.row.proxiable === true"
                  v-model="props.row.proxied"
                  label=""
                  @click.stop="
                    props.row.proxiable === true
                      ? saveRecordDNS(props.row)
                      : null
                  "
                >
                </q-toggle>
                <span v-else>
                  {{ props.row[col.field] }}
                </span>
              </q-td>
            </q-tr>
          </template>
        </q-table>

        <!--<div v-if="selectedApi">Hai selezionato: {{ getLabelSelApi() }}</div>-->
      </div>
    </div>

    <div v-if="!dnsPageActive">
      <div :class="statusWs === 'OPEN' ? 'bg-green' : 'bg-red'">
        STATO WS: {{ statusWs }}
      </div>

      <q-btn v-if="ris" label="Svuota" @click="ris = ''"></q-btn>
      <q-btn v-if="messages" label="Svuota" @click="messages = ''"></q-btn>
    </div>

    <q-spinner v-if="incaricamento" color="primary" size="3em" :thickness="2" />

    <div>
      <!--<input v-model="scriptName" placeholder="Nome dello script" />
      <button @click="startScript">Avvia Script</button>-->

      <div v-if="messages" class="container">
        <q-scroll-area ref="scrollArea" class="scroll-area">
          <pre v-html="messages"></pre>
        </q-scroll-area>
      </div>

      <div v-if="inputRequired">
        <input
          v-model="input"
          @keyup.enter="sendInput"
          :placeholder="inputPrompt"
          :type="
            inputPrompt.toLowerCase().includes('password') ? 'password' : 'text'
          "
        />
        <button @click="sendInput">Invia</button>
      </div>
    </div>

    <q-field v-if="messages === ''" stack-label dense>
      <template v-slot:control>
        <div class="full-width no-outline" tabindex="0">
          RISULTATO:<br />
          <pre v-html="ris"></pre>
        </div>
      </template>
    </q-field>
  </div>
  <!-- Dialog per inserire nuova email -->
  <q-dialog v-model="showNewEmail">
    <q-card style="min-width: 350px">
      <q-card-section>
        <div class="text-h6">Aggiungi Nuova Casella Email</div>
      </q-card-section>

      <q-card-section class="q-pt-none">
        <q-input
          v-model="newEmail"
          label="Indirizzo Email"
          type="email"
          :rules="[(val) => !!val || 'Email è obbligatoria']"
        />
        <q-input
          v-model="newPassword"
          label="Password"
          :type="isPwd ? 'password' : 'text'"
          :rules="[
            (val) =>
              val.length >= 8 ||
              'La password deve essere di almeno 8 caratteri',
          ]"
        >
          <template v-slot:append>
            <q-icon
              :name="isPwd ? 'visibility_off' : 'visibility'"
              class="cursor-pointer"
              @click="isPwd = !isPwd"
            />
          </template>
        </q-input>
      </q-card-section>

      <q-card-actions align="right" class="text-primary">
        <q-btn flat label="Annulla" v-close-popup />
        <q-btn
          flat
          label="Aggiungi Casella"
          @click="addEmail"
          :disable="!isFormValid"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
  <q-dialog v-model="showchangePwd">
    <q-card style="min-width: 350px">
      <q-card-section>
        <div class="text-h6">Aggiorna Password Email</div>
      </q-card-section>

      <q-card-section class="q-pt-none">
        <q-input
          v-model="emailSel"
          label="Indirizzo Email"
          type="email"
          :disable="true"
        />
        <q-input
          v-model="changePassword"
          autofocus
          label="Password"
          :type="isPwd ? 'password' : 'text'"
          :rules="[
            (val) =>
              val.length >= 8 ||
              'La password deve essere di almeno 8 caratteri',
          ]"
        >
          <template v-slot:append>
            <q-icon
              :name="isPwd ? 'visibility_off' : 'visibility'"
              class="cursor-pointer"
              @click="isPwd = !isPwd"
            />
          </template>
        </q-input>
      </q-card-section>

      <q-card-actions align="right" class="text-primary">
        <q-btn flat label="Annulla" v-close-popup />
        <q-btn
          flat
          label="Aggiorna Password"
          @click="setMailUserPwd"
          :disable="!isFormValidChange"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>


<script lang="ts" src="./server.ts">
</script>

<style lang="scss" scoped>
@import "./server";
</style>
