<template>
  <q-dialog
    v-model="showpage"
    ref="sendCoinDialog"
    :maximized="$q.screen.lt.sm"
    @hide="hide"
    @show="qtyRef ? qtyRef.focus() : ''"
  >
    <q-card
      class="dialog_card"
      style="display: flex; flex-direction: column; height: 100%"
    >
      <q-bar class="bg-primary text-white">
        {{ $t("circuit.sendcoins") }}
        <q-space />
        <q-btn flat round color="white" icon="close" v-close-popup></q-btn>
      </q-bar>

      <q-card-section>
        <q-stepper
          v-model="step"
          ref="stepper"
          color="primary"
          animated
          class="mystepper"
        >
          <q-step
            :name="0"
            :title="getTitle(0)"
            :icon="getIcon(0)"
            :done="ifNextCheck(0)"
          >
            <CCheckCircuitsEnabled :to_user="to_user" :to_group="to_group">
            </CCheckCircuitsEnabled>

            <div v-if="circuitloaded.symbol">
              <q-select
                v-if="circuitname === ''"
                :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
                rounded
                dense
                outlined
                v-model="circuitsel"
                :options="bothcircuits"
                label="Circuito"
              >
              </q-select>
              <div v-else>{{ circuitname }}</div>
            </div>

            <q-banner
              v-if="showProvinceToSelect"
              rounded
              class="bg-red text-white"
              style="text-align: center"
            >
              <div>
                <em style="font-weight: bold">{{
                  $t("circuit.insertprovince_text")
                }}</em>
              </div>
              <br />
            </q-banner>
            <br />
            <div v-if="circuitsel">
              <q-banner
                rounded
                dense
                class="shadow-5 q-my-sm"
                color="primary q-title"
                style="text-align: center"
              >
                <div class="mybanner_left q-mb-sm">
                  <q-select
                    v-if="arrTypesAccounts.length > 0"
                    v-model="tipoConto"
                    class="my-custom-select"
                    outlined
                    bg-color="light-blue-2"
                    emit-value
                    map-options
                    :options="arrTypesAccounts"
                    :label="$t('circuit.sender')"
                  ></q-select>
                </div>
                <div
                  v-if="
                    tipoConto === shared_consts.AccountType.CONTO_DI_GRUPPO
                  "
                >
                  <q-select
                    v-model="from_groupname"
                    :options="arrGroupsList"
                    :label="$t('circuit.choosecontocom')"
                    rounded
                    emit-value
                    map-options
                  >
                    <!-- Mostra i gruppi su cui sei Admin -->
                  </q-select>
                </div>
                <div
                  v-else-if="
                    tipoConto === shared_consts.AccountType.COMMUNITY_ACCOUNT
                  "
                >
                  <q-input
                    v-model="from_contocom"
                    :label="$t('circuit.contocom')"
                    readonly
                    class="q-my-sm"
                  >
                  </q-input>
                </div>

                <CSaldo
                  v-if="circuitloaded && circuitloaded.symbol"
                  :symbol="circuitloaded.symbol"
                  :color="circuitloaded.color"
                  :saldo="accountloaded ? accountloaded.saldo : 0"
                  :qtarem="
                    accountloaded
                      ? circuitStore.getRemainingCoinsToSend(accountloaded)
                      : 0
                  "
                >
                </CSaldo>
              </q-banner>

              <q-banner
                rounded
                dense
                class="shadow-5 q-my-sm"
                color="primary q-title"
              >
                <div class="mybanner_left bg-green text-white q-mb-sm">
                  {{ $t("circuit.dest") }}
                </div>

                <!-- Destination -->
                <CMyUserOnlyView
                  v-if="to_user"
                  :mycontact="to_user"
                  :visu="costanti.FIND_PEOPLE"
                  @setCmd="tools.setCmd"
                >
                </CMyUserOnlyView>
                <CMyGroupOnlyView
                  v-if="to_group"
                  :mygrp="to_group"
                  :visu="costanti.USER_GROUPS"
                  :circuitname="circuitloaded.name"
                >
                </CMyGroupOnlyView>
                <CMyGroupOnlyView
                  v-if="circuitloaded && !!circuitloaded._id && to_contocom"
                  :mygrp="{ groupname: to_contocom }"
                  :visu="costanti.USER_GROUPS"
                  :circuitname="circuitloaded.name"
                >
                </CMyGroupOnlyView>
              </q-banner>
            </div>

            <q-inner-loading id="spinner" :showing="loading">
              <q-spinner-tail size="6em" color="primary" />
            </q-inner-loading>
          </q-step>
          <q-step
            :name="1"
            :title="getTitle(1)"
            :icon="getIcon(1)"
            :done="ifNextCheck(1)"
          >
            <div v-if="circuitloaded && !!circuitloaded._id">
              <q-banner
                v-if="!circuitloaded.transactionsEnabled"
                rounded
                class="bg-red text-white"
                style="text-align: center"
              >
                <em style="font-weight: bold">{{
                  $t("circuit.transactionsEnabled_text")
                }}</em
                ><br />
              </q-banner>

              <q-input
                ref="qtyRef"
                class="q-py-sm text-h5"
                outlined
                v-model="qty"
                :type="$q.platform.is.mobile ? 'string' : 'number'"
                :rules="[
                  (val) =>
                    val <=
                      circuitStore.getRemainingCoinsToSend(accountloaded) ||
                    t('circuit.qta_remaining_to_send', {
                      maxqta:
                        circuitStore.getRemainingCoinsToSend(accountloaded),
                      symbol: circuitloaded.symbol,
                    }),
                  (val) => val > 0 || t('circuit.qta_not_valid'),
                ]"
                :label="
                  t('movement.amount_to_send', {
                    qtamax: circuitStore.getRemainingCoinsToSend(accountloaded)
                      ? circuitStore
                          .getRemainingCoinsToSend(accountloaded)
                          .toFixed(2)
                      : 0 + ` ` + circuitloaded.symbol,
                  })
                "
                input-class="text-right"
                input-style="padding-bottom: 24px !important;"
                v-on:keyup.enter="$event.target.nextElementSibling.focus()"
              >
                <!--val => val > circuitStore.getMaxCoinsToSend(accountloaded) || t('circuit.qta_max_to_send', { maxqta: tools.getRemainingCoinsToSend(accountloaded), symbol: circuitloaded.symbol })]" -->
                <template v-slot:append>
                  <div class="text-h5">
                    <em
                      class="q-px-sm text-white rounded-borders"
                      :style="
                        `background-color: ` +
                        (circuitloaded.color ? circuitloaded.color : '#ff5500')
                      "
                      >{{ circuitloaded.symbol }}</em
                    >
                  </div>
                </template>
              </q-input>
              <div class="q-mt-md">
                <CNumericKeyboard v-model="qty" :showInput="false" />
              </div>
            </div>
          </q-step>
          <q-step
            :name="2"
            :title="getTitle(2)"
            :icon="getIcon(2)"
            :done="ifNextCheck(2)"
          >
            <!-- Destination -->
            <CMyUserOnlyView
              v-if="to_user"
              :mycontact="to_user"
              :visu="costanti.FIND_PEOPLE"
              @setCmd="tools.setCmd"
            >
            </CMyUserOnlyView>
            <CMyGroupOnlyView
              v-if="to_group"
              :mygrp="to_group"
              :visu="costanti.USER_GROUPS"
              :circuitname="circuitloaded.name"
            >
            </CMyGroupOnlyView>
            <CMyGroupOnlyView
              v-if="circuitloaded && !!circuitloaded._id && to_contocom"
              :mygrp="{ groupname: to_contocom }"
              :visu="costanti.USER_GROUPS"
              :circuitname="circuitloaded.name"
            >
            </CMyGroupOnlyView>

            <div v-if="causalDest">
              <q-field
                rounded
                filled
                :label="t('circuit.descrizione_destinatario')"
                stack-label
              >
                <template v-slot:append>
                  <q-icon name="description" />
                </template>
                <template v-slot:control>
                  <div class="self-center full-width no-outline" tabindex="0">
                    {{ causalDest }}
                  </div>
                </template>
              </q-field>
            </div>

            <!--<q-banner v-if="visubanner" rounded class="text-center text-bold">
              {{ $t('circuit.descr_casuale') }}
              <template v-slot:action>
                <q-btn label="Chiudi" flat @click="visubanner = false"></q-btn>
              </template>
            </q-banner>-->
            <div class="q-mt-sm text-italic text-blue text-bold">
              {{ $t("circuit.descr_casuale") }}
            </div>
            <q-input
              ref="causalRef"
              v-model="causal"
              autogrow
              rounded
              filled
              maxlength="200"
              counter
              :label="$t('circuit.note')"
              class="q-my-sm full-width"
            >
              <template v-slot:after>
                <q-avatar>
                  <img
                    :src="
                      userStore.my.profile
                        ? userStore.getImgByProfile(userStore.my)
                        : ''
                    "
                    :alt="userStore.my.username"
                  />
                </q-avatar>
              </template>
              <template v-slot:prepend>
                <q-icon name="comment" />
              </template>
            </q-input>

            <div class="sendris">
              {{
                $t("circuit.sendcoinsto", {
                  qty,
                  coin: circuitloaded.symbol,
                  dest: to_group
                    ? to_group.groupname
                    : to_user
                    ? tools.getNomeUtenteByRecUser(to_user)
                    : to_contocom,
                })
              }}
              sul {{ circuitsel }}
            </div>
          </q-step>
        </q-stepper>
      </q-card-section>
      <q-card-actions align="center" style="row justify-between">
        <q-btn
          class="col"
          flat
          :label="$t('dialog.indietro')"
          color="primary"
          icon="navigate_before"
          @click="clickIndietro(step)"
        ></q-btn>
        <q-btn
          class="col"
          :disable="!ifNextCheck(step)"
          :label="
            step === 0 || step === 1
              ? $t('dialog.avanti')
              : $t('circuit.sendcoins', {
                  qty,
                  coin: circuitloaded.symbol,
                  dest: to_group
                    ? to_group.groupname
                    : to_user
                    ? tools.getNomeUtenteByRecUser(to_user)
                    : to_contocom,
                })
          "
          color="positive"
          :icon-right="
            step === 2 ? 'img: /images/1ris_rosso_100.png' : 'navigate_next'
          "
          @click="clickAvanti(step)"
        ></q-btn>
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

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

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