<template>
  <div>
    <div v-if="mypathin && !!rec">
      <q-inner-loading
        id="spinner"
        :showing="onloading"
      >
        <q-spinner-tail
          color="primary"
          size="4em"
        >
        </q-spinner-tail>
      </q-inner-loading>

      <div v-if="!onloading">
        <q-toggle
          v-if="tools.isManager()"
          v-model="editOn"
          dense
          color="green"
          size="sm"
          @update:model-value="changeVisuDrawer(mypathin, editOn)"
          icon="fas fa-pencil-alt"
        >
        </q-toggle>

        <q-drawer
          v-model="visuEditor"
          v-if="selElem && editOn && !tools.isObjectEmpty(selElem)"
          show-if-above
          :breakpoint="350"
          side="right"
          :width="tools.isMobile() ? 350 : mywidthEditor"
          elevated
          style="transition: 'width 0.3s ease'"
        >
          <q-bar
            dense
            class="q-ma-xs bg-primary text-white"
          >
            <q-toolbar-title> Editor </q-toolbar-title>
            <q-btn
              flat
              round
              size="md"
              color="white"
              icon="close"
              @click="
                visuEditor = false;
                selElem = {};
              "
            ></q-btn>
          </q-bar>

          <CMyEditElem
            :myelem="selElem"
            :editOn="true"
            :path="rec.path"
            :idPage="rec._id"
            @selElemClick="selElemClick"
            @deleteElem="deleteElem"
            @toggleSize="toggleSize"
            @dupPage="duplicatePage"
            @expPage="showexportPage = !showexportPage"
            @impPage="showimportPage = !showimportPage"
          >
          </CMyEditElem>
        </q-drawer>

        <div
          :class="{ 'q-gutter-xs': !hideHeader }"
          :style="[
            {
              'margin-left': hideHeader ? 0 : 1 + 'px',
              'margin-right': hideHeader ? 0 : 1 + 'px',
            },
          ]"
        >
          <div
            v-if="!!rec.img1"
            class="text-center"
          >
            <q-img
              :src="`` + rec.img1"
              class="img"
            ></q-img>
          </div>

          <div
            v-if="!!rec.content"
            v-html="rec.content"
          ></div>
          <q-video
            v-if="!!rec.video1"
            :src="rec.video1"
            :ratio="rec.ratio1"
          >
          </q-video>

          <div
            v-if="!!rec.img2"
            class="text-center"
          >
            <q-img
              :src="`` + rec.img2"
              class="img"
            ></q-img>
          </div>

          <div
            v-if="!!rec.content2"
            v-html="rec.content2"
          ></div>
          <q-video
            v-if="!!rec.video2"
            :src="rec.video2"
            :ratio="rec.ratio2"
          ></q-video>

          <div
            v-if="!!rec.img3"
            class="text-center"
          >
            <q-img
              :src="`` + rec.img2"
              class="img"
            ></q-img>
          </div>

          <div
            v-if="!!rec.content3"
            v-html="rec.content3"
          ></div>
          <q-video
            v-if="!!rec.video3"
            :src="rec.video3"
            :ratio="rec.ratio3"
          ></q-video>
          <div
            v-if="!!rec.content4"
            v-html="rec.content4"
          ></div>

          <div
            v-for="myelem in myelems"
            :key="myelem._id"
          >
            <div>
              <transition
                :duration="1000"
                appear
              >
                <div>
                  <CTitleBanner
                    v-if="(myelem.active || editOn) && !!rec.path && myelem.titleBanner"
                    :class="`q-pa-xs`"
                    :title="myelem.titleBanner"
                    bgcolor="bg-primary"
                    :clcolor="myelem.color ? `` : `text-white`"
                    :mystyle="myelem.color ? `color: ${myelem.color} !important;` : ``"
                    :myclass="myelem.classBanner"
                    :canopen="true"
                  >
                  </CTitleBanner>

                  <!-- Sezione -->
                  <div v-if="myelem.type === shared_consts.ELEMTYPE.SECTION">
                    <div
                      v-if="editOn"
                      class="text-center"
                    >
                      <div v-if="editOn">SEZIONE:</div>
                    </div>

                    <CMyElem
                      :myelem="myelem"
                      :idPage="rec._id"
                      :editOn="editOn"
                      :addOn="addOn"
                      :path="!!rec.path ? rec.path : ''"
                      :selElem="selElem"
                      @selElemClick="selElemClick"
                    >
                      <!-- Rendering righe dentro la sezione -->
                      <div
                        v-for="(row, indriga) in myelem.rows"
                        :key="row._id"
                        class="row-container"
                      >
                        <div
                          v-if="editOn"
                          class="text-center q-mb-md"
                        >
                          <q-btn
                            v-if="editOn"
                            dense
                            rounded
                            label="Riga"
                            size="sm"
                            color="positive"
                            icon="add"
                            @click="
                              addNewElemSectRow(
                                myelem.order + 1,
                                myelem,
                                shared_consts.ELEMTYPE.ROW,
                                row._id
                              )
                            "
                          >
                            <q-tooltip> Aggiungi Riga </q-tooltip>
                          </q-btn>
                        </div>

                        <div v-if="row.type === shared_consts.ELEMTYPE.ROW">
                          <div
                            v-if="editOn"
                            class="text-center"
                          >
                            <div v-if="editOn">RIGA {{ indriga + 1 }}:</div>
                          </div>
                          <CMyElem
                            :myelem="row"
                            :idPage="rec._id"
                            :editOn="editOn"
                            :addOn="addOn"
                            :path="!!rec.path ? rec.path : ''"
                            :selElem="selElem"
                            @selElemClick="selElemClick"
                          >
                            <!-- Rendering colonne dentro la riga -->
                            <div class="row q-col-gutter-md items-stretch">
                              <template
                                v-for="(col, index) in row.columns"
                                :key="col._id"
                              >
                                <div
                                  v-if="col.type === shared_consts.ELEMTYPE.COLUMN"
                                  :class="getColClasses(col, row, index)"
                                >
                                  <div
                                    :style="editOn ? `border: 2px dashed #1976d2` : ``"
                                  >
                                    <div
                                      v-if="editOn"
                                      class="text-center"
                                    >
                                      Colonna {{ index + 1 }}:
                                    </div>
                                    <div
                                      v-for="el in col.elems"
                                      :key="el._id"
                                    >
                                      <CMyElem
                                        :myelem="el"
                                        :idPage="rec._id"
                                        :editOn="editOn"
                                        :addOn="addOn"
                                        :path="!!rec.path ? rec.path : ''"
                                        :selElem="selElem"
                                        @selElemClick="selElemClick"
                                      />
                                      <div class="text-center q-mb-md">
                                        <q-btn
                                          v-if="editOn"
                                          dense
                                          rounded
                                          size="sm"
                                          color="negative"
                                          icon="delete"
                                          @click="deleteElemento(el)"
                                        >
                                          <q-tooltip> Elimina Elemento </q-tooltip>
                                        </q-btn>
                                      </div>
                                    </div>
                                  </div>

                                  <div class="text-center q-mb-md">
                                    <q-btn
                                      v-if="editOn"
                                      dense
                                      rounded
                                      size="sm"
                                      color="positive"
                                      icon="add"
                                      @click="
                                        visuadd = true;
                                        myElemSel = col;
                                        myElemParent = myelem;
                                      "
                                    >
                                      <q-tooltip> Aggiungi Elemento </q-tooltip>
                                    </q-btn>
                                  </div>

                                  <div class="text-center q-mb-md">
                                    <q-btn
                                      v-if="editOn"
                                      dense
                                      rounded
                                      size="sm"
                                      label="Colonna"
                                      color="negative"
                                      icon="delete"
                                      @click="deleteCol(col)"
                                    >
                                      <q-tooltip> Elimina Colonna </q-tooltip>
                                    </q-btn>
                                  </div>
                                </div>
                              </template>
                            </div>
                          </CMyElem>

                          <div
                            v-if="editOn"
                            class="text-center q-mb-md"
                          >
                            <q-btn
                              v-if="editOn"
                              dense
                              rounded
                              size="sm"
                              label="Colonna"
                              color="primary"
                              icon="add"
                              @click="
                                addNewElemSectRow(
                                  row.order + 1,
                                  row,
                                  shared_consts.ELEMTYPE.COLUMN
                                )
                              "
                            >
                              <q-tooltip> Aggiungi Colonna </q-tooltip>
                            </q-btn>
                          </div>
                        </div>
                        <div class="text-center q-mb-md">
                          <q-btn
                            v-if="editOn"
                            dense
                            rounded
                            size="sm"
                            label="Riga"
                            color="negative"
                            icon="delete"
                            @click="deleteRow(row)"
                          >
                            <q-tooltip> Elimina Riga </q-tooltip>
                          </q-btn>
                        </div>
                      </div>
                      <div
                        v-if="editOn"
                        class="text-center q-mb-md"
                      >
                        <q-btn
                          v-if="editOn"
                          dense
                          rounded
                          label="Riga"
                          size="sm"
                          color="positive"
                          icon="add"
                          @click="
                            addNewElemSectRow(
                              myelem.order + 1,
                              myelem,
                              shared_consts.ELEMTYPE.ROW
                            )
                          "
                        >
                          <q-tooltip> Aggiungi Riga </q-tooltip>
                        </q-btn>
                      </div>
                    </CMyElem>
                  </div>

                  <!-- Elementi senza Sezione (retrocompatibilità) -->
                  <div v-if="myelem.type !== shared_consts.ELEMTYPE.SECTION">
                    <CMyElem
                      :myelem="myelem"
                      :idPage="rec._id"
                      :editOn="editOn"
                      :addOn="addOn"
                      :path="!!rec.path ? rec.path : ''"
                      :selElem="selElem"
                      @selElemClick="selElemClick"
                    />
                  </div>

                  <div class="text-center q-mb-md">
                    <q-btn
                      v-if="editOn"
                      dense
                      rounded
                      size="sm"
                      color="positive"
                      icon="add"
                      @click="
                        visuadd = true;
                        myElemSel =
                          myelems.length > 0 ? myelems[myelems.length - 1] : null;
                        myElemParent =
                          myelems.length > 0 ? myelems[myelems.length - 1] : null;
                      "
                    >
                      <q-tooltip> Aggiungi Elemento </q-tooltip>
                    </q-btn>
                  </div>
                </div>
              </transition>
            </div>
          </div>

          <div v-if="myelems.length === 0">
            <CMyElem
              v-if="editOn && !!rec.path"
              :myelem="myelemVoid"
              :editOn="editOn"
              :addOn="addOn"
              :idPage="rec._id"
              :selElem="selElem"
              :path="rec.path"
              @selElemClick="selElemClick"
            >
            </CMyElem>
          </div>
        </div>
        <LandingFooter v-if="rec.showFooter"></LandingFooter>
      </div>
    </div>
    <div v-else>
      <div v-if="!!title">
        <CTitle
          v-if="imgbackground"
          :imgbackground="imgbackground"
          :headtitle="title"
          :sizes="sizes"
          :styleadd="styleadd"
        ></CTitle>
        <div v-if="!imgbackground">
          <CImgTitle
            v-if="img"
            :src="img"
            :title="title"
          >
          </CImgTitle>
        </div>
        <slot></slot>
        <div v-if="!nofooter"></div>
      </div>
    </div>

    <q-dialog v-model="showexportPage">
      <q-card class="dialog_card">
        <q-toolbar class="bg-primary text-white">
          <q-toolbar-title> Esporta Pagina </q-toolbar-title>
          <q-btn
            flat
            round
            color="white"
            icon="close"
            v-close-popup
          ></q-btn>
        </q-toolbar>
        <q-card-section class="q-pa-xs inset-shadow">
          <br />
          <CExportImportPage
            :idPage="rec._id"
            :nomefileprop="`esporta_${rec.path}.json`"
            :esporta="true"
          >
          </CExportImportPage>
          <br />
        </q-card-section>
      </q-card>
    </q-dialog>
    <q-dialog v-model="showimportPage">
      <q-card class="dialog_card">
        <q-toolbar class="bg-primary text-white">
          <q-toolbar-title> Esporta Pagina </q-toolbar-title>
          <q-btn
            flat
            round
            color="white"
            icon="close"
            v-close-popup
          ></q-btn>
        </q-toolbar>
        <q-card-section class="q-pa-xs inset-shadow">
          <br />
          <CExportImportPage
            :idPage="rec._id"
            :nomefileprop="`esporta_${rec.path}.json`"
          >
          </CExportImportPage>
          <br />
        </q-card-section>
      </q-card>
    </q-dialog>
    <div>
      <q-dialog
        v-model="visuadd"
        style="
          width: 600px;
          max-width: 100%;
          position: fixed;
          left: 0;
          top: 0;
          height: 100%;
        "
        transition-show="slide-up"
        transition-hide="slide-down"
      >
        <CMyElemAdd
          v-if="visuadd"
          :myelem="myElemSel"
          :myElemParent="myElemParent"
          :idPage="rec._id"
          :editOn="editOn"
          :addOn="addOn"
          :addonlyinMem="true"
          @AddedNewElem="AddedNewElem"
          @close="visuadd = false"
        >
        </CMyElemAdd>
      </q-dialog>
    </div>
  </div>
</template>

<script lang="ts" src="./CMyPageElem.ts"></script>
<style lang="scss" scoped>
@import './CMyPageElem.scss';
</style>
