import { computed, defineComponent, onMounted, PropType, ref, watch } from 'vue'

import { IAccount, ICircuit, IOperators, ISendCoin, ISpecialField, IUserFields } from '../../model'
import { tools } from '@store/Modules/tools'
import { CCurrencyValue } from '@/components/CCurrencyValue'
import { useUserStore } from '@store/UserStore'
import { useCircuitStore } from '@store/CircuitStore'
import { useQuasar } from 'quasar'
import { useI18n } from '@/boot/i18n'

export default defineComponent({
  name: 'CSendCoins',
  emits: ['close'],
  props: {
    showprop: {
      type: Boolean,
      default: false,
    },
    to_user: {
      type: Object as PropType<IUserFields>,
      required: true,
    },
  },
  components: { CCurrencyValue },

  setup(props, { emit }) {
    const $q = useQuasar()
    const { t } = useI18n()
    const show = ref(false)
    const userStore = useUserStore()
    const circuitStore = useCircuitStore()


    const from_username = ref(userStore.my.username)
    const circuitsel = ref('')
    const qty = ref(1)
    const causal = ref('')
    const bothcircuits = ref(<any>[])

    const circuitloaded = ref(<ICircuit | undefined>undefined)
    const circuitdest = ref(<ICircuit | undefined>undefined)
    const accountloaded = ref(<IAccount | undefined>undefined)
    const accountdest = ref(<IAccount | undefined>undefined)
    const remainingCoins = ref(0)

    const priceLabel = computed(() => circuitloaded.value ? `${qty.value} ` + circuitloaded.value.symbol : '')
    const arrayMarkerLabel = ref(<any>[])

    const qtyRef = ref(null)

    watch(() => circuitsel.value, (newval, oldval) => {
      aggiorna()
    })

    watch(() => props.showprop, (newval, oldval) => {
      console.log('props.showprop', props.showprop, newval)
      show.value = newval
    })

    function aggiorna() {
      circuitloaded.value = circuitStore.listcircuits.find((rec: ICircuit) => rec.name === circuitsel.value)
      if (circuitloaded.value) {
        accountloaded.value = userStore.getAccountByCircuitId(circuitloaded.value._id)
        // accountdest.value = userStore.getAccountByCircuitId(circuitloaded.value._id)
        if (accountloaded.value) {
          remainingCoins.value = tools.getRemainingCoinsToSend(accountloaded.value)
          const quanti = [ ...Array(100).keys() ].map( i => i+1)
          for (const ind of quanti) {
            let value = ind * 10
            if (value > remainingCoins.value) {
              break
            } else {
              const label = value.toString()
              arrayMarkerLabel.value.push({value, label})
            }
          }
        }

      }


      console.log('circuitStore.listcircuits', circuitStore.listcircuits, 'aggiorna', circuitloaded.value)
      console.log('userStore.my.profile.mycircuits', userStore.my.profile.mycircuits)
    }

    function mounted() {


      // ....

      bothcircuits.value = userStore.IsMyCircuitByUser(props.to_user)

      if (bothcircuits.value.length === 1) {
        circuitsel.value = bothcircuits.value[0]
      }

      aggiorna()

      show.value = true
    }

    function hide() {
      emit('close', true)
    }

    function sendCoin() {
      console.log('sendcoin', qty.value, props.to_user.username)

      if (props.to_user.username && qty.value && circuitloaded.value) {
        const myrecsendcoin: ISendCoin = {
          qty: qty.value,
          dest: props.to_user.username,
          circuitname: circuitsel.value,
          causal: causal.value,
          symbol: circuitloaded.value.symbol,
        }
        console.log('myrecsendcoin', myrecsendcoin)
        if (circuitloaded.value) {
          tools.sendCoinsByCircuit($q, circuitloaded.value, myrecsendcoin).then((ris: any) => {
            if (ris) {
              show.value = false
            }
          })
        }
      }
    }

    onMounted(mounted)

    return {
      t,
      tools,
      show,
      bothcircuits,
      from_username,
      circuitsel,
      circuitloaded,
      accountloaded,
      accountdest,
      qty,
      hide,
      sendCoin,
      causal,
      priceLabel,
      arrayMarkerLabel,
      remainingCoins,
      qtyRef,
    }
  },
})