<template>
    <div class="row align-items-md-stretch">
        <div class="col-12 mb-4">
          <div class="card accordion accordion-flush mx-2">
            <div class="accordion-item">
              <h2 class="accordion-header" id="flush-headingOne">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                  Staking Calculator
                </button>
              </h2>
              <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
                <div class="accordion-body">
                  <staking-calculator></staking-calculator>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-6 col-sm-12 col-xs-10">
            <staking-interest></staking-interest>
        </div>
        <!-- <div class="col-md-6 col-sm-12 col-xs-12"> -->
            <div id="stake-unstake" class="col-md-6 col-sm-12 col-xs-10">
                <!-- <div class="row">
                    <div class="col-12"> -->
                        <div class="card text-bg-light mb-2 mx-2">
                            <div class="card-body">
                                <div class="row d-flex justify-content-around">
                                    <div class="col-6">
                                        <button id="stake-btn" :class="isStake ? 'btn-meta-1' : 'btn-meta-2'" class="btn w-100" type="button"
                                                @click="rotateStakeUnstake($event)">{{
                                            $t(i18nConst.stakingStakeMetadexButton)
                                        }}
                                        </button>
                                    </div>
                                    <div class="col-6">
                                        <button id="unstake-btn" :class="!isStake ? 'btn-meta-1' : 'btn-meta-2'" class="btn w-100" type="button"
                                                @click="rotateStakeUnstake($event)">{{
                                            $t(i18nConst.unstakingStakeMetadexButton)
                                        }}
                                        </button>
                                    </div>
                                </div>
                            </div>
                        <!-- </div>
                    </div> -->
                </div>
                <div :class="{ 'rotate-stake': isStake, 'rotate-unstake': !isStake }" class="flip-card-inner ">
                    <staking-metadex v-if="isStake" class="stake" style="z-index:-1"></staking-metadex>
                    <unstaking-metadex v-else class="unstake" style="z-index:-1"></unstaking-metadex>
                </div>
                
            </div>
        <!-- </div> -->
        <!-- <div class="col-md-6 col-sm-12 col-xs-10">
            <staking-metadex></staking-metadex>
        </div>
        <div class="col-md-6 col-sm-12 col-xs-10">
            <unstaking-metadex></unstaking-metadex>
        </div> -->
        
        <div class="col-md-12 col-sm-12 col-xs-10 pb-4">
            <staking-history></staking-history>
        </div>
    </div>
</template>

<script>
import StakingInterest from '../components/staking/StakingInterest.vue';
import StakingMetadex from '../components/staking/StakingMetadex.vue';
import UnstakingMetadex from '../components/staking/UnstakingMetadex.vue';
import StakingHistory from '../components/staking/StakingHistory.vue';
import StakingCalculator from '../components/staking/StakingCalculator.vue';

import i18nConstantes from "@/constantes/i18n.constantes.js";
export default {
  components: {
    StakingMetadex, 
    UnstakingMetadex, 
    StakingInterest,
    StakingHistory,
    StakingCalculator
  },
  name: "Staking",
  data() {
    return {
        i18nConst: i18nConstantes,
        isStake: true
    };
  },
  methods: {
    rotateStakeUnstake(event) {
      this.isStake = event.target.id === 'stake-btn' ? true : false;
    }
  }
}
</script>

<style lang="scss" scoped>
#stake-unstake {
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  transition: transform 0.5s;
  transform-style: preserve-3d;
}

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

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

.stake,
.unstake {
  /*position: absolute;*/
  -webkit-backface-visibility: hidden;
  /* Safari */
  backface-visibility: hidden;
}

.unstake {
  transform: rotateY(180deg);
}
</style>
