<script lang='ts' setup>
import type { Animation } from "@ionic/vue";
import { createAnimation } from "@ionic/vue";
import { cartOutline } from "ionicons/icons";

const model = defineModel<"sale" | "buy" | null>();

const operationInst = useTemplateRef<HTMLDivElement>("operationInst");
const targetIsVisible = useElementVisibility(operationInst);
const animation = ref<Animation | null>(null);

watch(targetIsVisible, (visible) => {
  if (visible) {
    animation.value?.easing("ease-in")
      .fromTo("opacity", "0", "1")
      .play();
  }
  else {
    animation.value?.easing("ease-out")
      .fromTo("opacity", "1", "0")
      .play();
  }
});

onMounted(() => {
  animation.value = createAnimation()
    .addElement(operationInst.value!)
    .duration(500);
});
</script>

<template>
  <div v-if="model === null" ref="operationInst" class="operation-container">
    <div class="wrapper" />

    <div class="box">
      <div class="card sale" @click="model = 'sale'">
        <ion-icon :icon="cartOutline" />
        <text>My Sale</text>
      </div>
      <div class="card buy" @click="model = 'buy'">
        <ion-icon :icon="cartOutline" />
        <text>My Purchase</text>
      </div>
    </div>
  </div>
</template>

<style lang='css' scoped>
.operation-container {
  position: relative;
  width: 100%;
  height: 100%;
}
.wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--ion-color-dark);
  opacity: 0.3;
}
.box {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateY(-30%) translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100px;
}
.card {
  width: 94px;
  height: 97px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
}
.card ion-icon {
  font-size: 1.7rem;
}
.card text {
  margin-top: 10px;
  font-size: 0.8rem;
  font-weight: 500;
}
.card.sale {
  background: linear-gradient(231deg, #8b6bff 6%, #49eeff 104%);
}
.card.buy {
  background: linear-gradient(231deg, #ff6b6b 6%, #ffcc00 104%);
  margin-left: 20px;
}
</style>
