<template>
    <v-dialog v-model="co.showPoolSelection" max-width="300">
      <v-card title="Pool Selection">
        <v-card-text>
          <div class="mb-2">
            <v-avatar image="/arbitrum-logo.svg" size="x-small" class="mr-1"/> Arbitrum One
          </div>
          <div class="mb-2">
            <v-avatar image="/uniswap-logo.svg" size="x-small" class="mr-1" style="background-color: white"/> Uniswap v3
          </div>
          <table>
            <tbody>
            <tr><td>Pool</td><td><scanner-button :addr="co.selectedSymbol.address"/></td></tr>
            <tr><td>{{ co.selectedSymbol.base.s }}</td><td><scanner-button :addr="co.selectedSymbol.base.a"/></td></tr>
            <tr><td>{{ co.selectedSymbol.quote.s }}</td><td><scanner-button :addr="co.selectedSymbol.quote.a"/></td></tr>
            </tbody>
          </table>
          <v-table class="mt-4">
            <thead>
              <tr><th>Selected</th><th>Fee</th><td>Liquidity</td></tr>
            </thead>
            <tbody>
              <tr v-for="([addr,fee],i) in co.selectedSymbol.feeGroup"
                  :class="co.selectedSymbol.fee === fee ? 'selected' : 'selectable'" @click="selectFee(fee)">
                <td><v-icon v-if="co.selectedSymbol.fee===fee" icon="mdi-check"/></td>
                <td>{{(fee/10_000).toFixed(2)}}%</td>
                <td>{{ !co.selectedSymbol.liquiditySymbol ? '' :
                        co.selectedSymbol.liquiditySymbol === 'USD' ?
                        `$${toHuman(co.selectedSymbol.liquidities[i])}` :
                        toHuman(co.selectedSymbol.liquidities[i]) +' '+co.selectedSymbol.liquiditySymbol }}</td>
              </tr>
            </tbody>
          </v-table>
        </v-card-text>
      </v-card>
    </v-dialog>
</template>

<script setup>

import {toHuman} from "@/misc.js";
import ScannerButton from "@/components/ScannerButton.vue";
import {useChartOrderStore} from "@/orderbuild.js";
import {feelessTickerKey} from "@/charts/datafeed.js";
import {setSymbolTicker} from "@/charts/chart.js";

const co = useChartOrderStore()


function selectFee(fee) {
  if (fee === co.selectedSymbol.fee) return
  const symbol = co.selectedSymbol;
  const ticker = feelessTickerKey(symbol.ticker) + '|' + fee
  if (ticker !== symbol.ticker)
    setSymbolTicker(ticker).catch((e) => console.error('Could not change TV symbol to', ticker))
  co.showPoolSelection = false
}


</script>

<style scoped lang="scss">
@use "src/styles/vars" as *;

td {
  padding-right: 1em;
}
tr.selected {

}
tr.selectable {
  cursor: pointer;
  &:hover {
    background-color: #333;
  }
}
</style>

<style lang="scss">
.pool-button {
  color: blue;
  background-color: white;
}
</style>
