<template>
  <div v-if="!wrongNetwork && wrongNetwork !== ''">
    <!-- <earn-paused></earn-paused> -->
    <div id="earn-fix-flex" class="col-12">
      <div class="row">
        <div class="col-12">
          <div class="card text-bg-light mb-2">
            <div class="card-body">
              <div class="row d-flex justify-content-around">
                <div class="col-6">
                  <button id="fix-btn" :class="isFix ? 'btn-meta-1' : 'btn-meta-2'" class="btn w-100 h-100"
                    type="button" @click="rotateFixFlex($event)">
                    {{
                      $t(i18nConst.earnFix)
                    }}
                  </button>
                </div>
                <div class="col-6">
                  <button id="flex-btn" :class="!isFix ? 'btn-meta-1' : 'btn-meta-2'" class="btn w-100 h-100"
                    type="button" @click="rotateFixFlex($event)">
                    {{
                      $t(i18nConst.earnFlex)
                    }}
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div :class="{ 'rotate-fix': isFix, 'rotate-flex': !isFix }" class="flip-card-inner container">
        <earn-fix v-if="isFix" :balanceUsdc="balanceUsdc" :globalActionInProgress="globalActionInProgress"
          :metadexPrice="metadexPrice" class="earn-fix" style="z-index:-1">
        </earn-fix>
        <earn-flex v-else :balanceUsdc="balanceUsdc" :globalActionInProgress="globalActionInProgress"
          :metadexPrice="metadexPrice" class="earn-flex"></earn-flex>
      </div>
    </div>
    <div v-if="isFix">
      <earn-history :titleStr="$t(i18nConst.earnFixHistoryTitle)" :type="'FIX'" :version="'STD'"
        :emptyStr="$t(i18nConst.earnNoFixHistoryDescription)"></earn-history>
      <!-- <earn-history :titleStr="$t(i18nConst.earnFixHistoryMigrationTitle)" :type="'FIX'" :version="'MIG'"
        :emptyStr="$t(i18nConst.earnNoFixHistoryDescription)"></earn-history> -->
    </div>
    <div v-else>
      <earn-history :titleStr="$t(i18nConst.earnFlexHistoryTitle)" :type="'FLEX'" :version="'STD'"
        :emptyStr="$t(i18nConst.earnNoFlexHistoryDescription)"></earn-history>
      <!-- <earn-history :titleStr="$t(i18nConst.earnFlexHistoryMigrationTitle)" :type="'FLEX'" :version="'MIG'"
        :emptyStr="$t(i18nConst.earnNoFlexHistoryDescription)"></earn-history> -->
    </div>
  </div>
</template>
<script>
import i18nConstantes from "@/constantes/i18n.constantes.js";
import constantes from "@/constantes/constantes.js";
import EarnFix from '../components/earn/EarnFix.vue';
import EarnFlex from '../components/earn/EarnFlex.vue';
import { mapGetters } from "vuex";
import liquidityPoolService from '@/services/liquidityPool.service.js';
import EarnHistory from "../components/earn/EarnHistory.vue";
// import EarnPaused from "../components/earn/EarnPaused.vue";
import routesPath from "@/router/routesPath";

export default {
  data() {
    return {
      i18nConst: i18nConstantes,
      constantes: constantes,

      metadexPrice: '0',
      isFix: true
    }
  },
  components: {
    EarnFix,
    EarnFlex,
    EarnHistory,
    // EarnPaused
  },
  computed: {
    ...mapGetters("bonding", [
      "buyPrice",
    ]),
    ...mapGetters("global", ["balanceUsdc", "globalActionInProgress", "wrongNetwork"]),
  },
  methods: {
    rotateFixFlex(event) {
      this.isFix = event.target.id === 'fix-btn' ? true : false;
    }
  },
  async mounted() {
    if (!this.wrongNetwork && this.wrongNetwork !== "") {
      this.metadexPrice = await liquidityPoolService.getQuoteUsdcMetadex("1");
    } else {
      this.$router.push(routesPath.home);
    }
  }
}
</script>
<style scoped>
.flip-card-inner {
  position: relative;
  transition: transform 0.5s;
  transform-style: preserve-3d;
}

.rotate-flex {
  transform: rotateY(180deg);
  padding: unset;
  margin-left: -0.7rem;
  margin-bottom: 1rem;
}

.rotate-fix {
  transform: rotateY(0);
  padding: unset;
  margin-left: 0.7rem;
  margin-bottom: 1rem;
}

.earn-fix,
.earn-flex {
  /* position: absolute; */
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  /* Safari */
  backface-visibility: hidden;
}

.earn-flex {
  transform: rotateY(180deg);
}

#earn-fix-flex {
  perspective: 1000px;
}
</style>
