<template>
  <div
    class="flex flex-col items-start py-[18px]"
    :class="valueColor ? 'desktop:py-[10px]' : ''"
  >
    <div class="flex flex-1 flex-row max-w-[255px] items-center">
      <Icons url="info" :size="14" />
      <p class="ml-[7px] text-gray-BBB text-[14px] font-normal">
        {{ title }}
      </p>
    </div>
    <div
      class="flex flex-1 flex-row justify-start items-center mt-[15px] text-white"
      v-if="title === 'Tokens'"
    >
      <el-popover placement="bottom" :width="250" trigger="click">
        <template #reference>
          <!-- <el-button style="margin-right: 16px">{}</el-button> -->
          <p
            class="cursor-pointer text-white border border-white px-[8px] py-[2px]"
          >
            {{ list?.length || 0 }} token
          </p>
        </template>
        <template #default>
          <div class="h-[200px] overflow-y-scroll">
            <div
              v-for="(item, index) in list"
              :key="index"
              class="border-b py-[8px]"
            >
              <p class="ml-[24px]">{{ item?.tokenType }}</p>
              <p class="mt-[12px]">{{ item?.name }} &nbsp;</p>
              <p class="ml-[24px]">
                {{ `${item?.availableBalance}${item?.name}` }}
              </p>
            </div>
          </div>
        </template>
      </el-popover>
    </div>
    <div
      class="flex flex-1 flex-row justify-start items-center mt-[15px] text-white"
      v-else
    >
      <p
        :class="
          valueColor
            ? 'py-[6px] px-[12px] bg-black-006 rounded-[4px] text-blue-65B5FF'
            : ''
        "
        class="text-[15px] font-normal leading-[24px] break-all"
      >
        {{ value }}
      </p>
    </div>
  </div>
  <div
    :class="isLast ? 'desktop:hidden' : ''"
    style="border-bottom: 1px solid #3b3b3c"
  />
</template>

<script setup lang="ts">
import Icons from '@src/components/icons/index.vue'
import { onMounted, ref, watchEffect } from 'vue'
const props = defineProps({
  title: [String, Number] as any,
  value: [Number, String, Array] as any,
  valueColor: String,
  isCopy: Boolean,
  isLast: Boolean,
})
const list = ref<any>([])
watchEffect(() => {
  if (props.title === 'Tokens') {
    list.value = props.value
  }
})
</script>

<style lang="scss">
.tokens-select {
  .el-input__wrapper {
    background: #19191a;
    .el-input__inner {
      color: #fff;
    }
  }
  .el-select .el-input.is-focus .el-input__wrapper {
    box-shadow: 0 0 0 1px var(--el-select-border-color-hover) inset !important;
  }
  .el-select .el-input__wrapper.is-focus {
    box-shadow: 0 0 0 1px var(--el-select-border-color-hover) inset !important;
  }
}
</style>
