<template>
  <PageToolbar
    v-model:search="searchTerm"
    search-label="Search an asset"
  >
    <UiButton
      size="large"
      @click="notify({ id: 'wip', type: 'warning', text: 'Work in progress' })"
    >
      Manage assets
    </UiButton>
  </PageToolbar>

  <div class="asset-list">
    <AssetCard
      v-for="asset in filteredAssets"
      :key="asset.code"
      v-bind="asset"
      :is-active="sidebarOptions.modelValue && sidebarOptions.attrs.asset?.code === asset.code"
    />
  </div>
</template>

<script setup>
import { useModal } from 'vue-final-modal'
import { AssetSidebar } from '#components'

definePageMeta({
  middleware: ['auth'],
})

const { data: account } = useNuxtData('account')

const route = useRoute()
const notify = useNotify()
const { open, patchOptions, options: sidebarOptions } = useModal({
  component: AssetSidebar,
  attrs: {
    projectId: route.params.projectId,
  },
})

const searchTerm = ref('')

const assets = shallowRef([
  'USDT:Tether',
  'LTC:Litecoin',
  'DOGE:Dogecoin',
  'BTC:Bitcoin',
  'XRP:Ripple',
  'BNB:Binance',
  'BAT:Basic Attention Token',
  'EOS:EOS Network',
  'MKR:Maker',
  'DAI:Dai',
  'ETH:Ethereum',
  'DASH:Dash',
].map((item, idx) => {
  const [code, name] = item.split(':')
  const balance = $money.format(code === 'USDT' ? account.value.balance : 0, code)
  const rate = code === 'USDT' ? 1 : 213.25
  const withdraw = undefined
  // const balance = $money.format(code === 'USDT' ? account.value.balance : 0.002741, code)
  // const withdraw = idx % 2 !== 0 ? $money.format(0.15484, code) : undefined
  const disabled = code !== 'USDT'

  return {
    code,
    name,
    balance,
    rate,
    withdraw,
    disabled,
    onClick: () => {
      if (!disabled) {
        patchOptions({
          attrs: {
            asset: {
              code,
              name,
              balance,
              rate,
              withdraw,
            },
          },
        })

        open()
      }
      // else {
      //   notify({ type: 'warning', title: 'Work in progress', text: 'At the moment we only work with USDT', id: 'wip' })
      // }
    },
  }
}))

const { result: filteredAssets } = useFuseSearch(assets, { keys: ['code', 'name'] }, searchTerm)
</script>

<style lang="scss">
.asset-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 16px;
  border-radius: 12px;
  background-color: $clr-white;
  margin-top: 24px;
}
</style>
