<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>

            <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>

            <q-banner
              v-if="showProvinceToSelect"
              rounded
              class="bg-red text-white"
              style="text-align: center"
            >
              <em style="font-weight: bold">{{
                $t('circuit.insertprovince_text')
              }}</em
              ><br />
            </q-banner>

            <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.COLLECTIVE_ACCOUNT
                "
              >
                <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>

            <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 v-if="$q.platform.is.mobile" 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>

            <q-field class="text-center text-bold">
              {{ $t('circuit.descr_casuale') }}
            </q-field>
            <q-input
              ref="causalRef"
              v-model="causal"
              type="textarea"
              filled
              :label="$t('circuit.note')"
              class="q-my-sm full-width"
            >
            </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="
            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>
