<template>
  <div class="match-view">
    <p>This is the matched result page</p>
    <match-offer :offer="offer"></match-offer>
    <match-wish-list :wishlist="wishlist"></match-wish-list>
    <button>Sign Agreement Documentation</button>
    <button>It is not suitable</button>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { useRoute } from "vue-router";
import * as FetchOfferService from "@/services/FetchOfferService";
import * as FetchWishListService from "@/services/FetchWishListService";
import { OfferFormModel } from "@/models/OfferFormModel";
import { WishlistItemModel } from "@/models/WishlistItemModel";
import MatchOffer from "@/components/MatchOffer.vue";
import MatchWishList from "@/components/MatchWishList.vue";

const route = useRoute();
const offer = ref(OfferFormModel);
const wishlist = ref(WishlistItemModel);

async function fetchOffer(offerId: number) {
  const response = await FetchOfferService.getOffersFromServerWithID(offerId);
  console.log(response.data);
  offer.value = response.data;
}

async function fetchWishList(wishlistId: number) {
  const response = await FetchWishListService.getWishListFromServerWithID(
    wishlistId
  );
  console.log(response.data);
  wishlist.value = response.data;
}

watch(
  () => route.name,
  (values) => {
    const offerIdName = route.params.offerId;
    const offerIdNumber = +offerIdName;
    const wishlistIdName = route.params.wishlistId;
    const wishlistIdNumber = +wishlistIdName;
    fetchOffer(offerIdNumber);
    fetchWishList(wishlistIdNumber);
  },
  { immediate: true }
);
</script>

<style scoped>
.match-view {
  display: block;
  text-align: center;
}

.button1 {
  margin-top: 2%;
  margin-left: 2%;
}

button,
button::after {
  margin-top: 2%;
  margin-left: 2%;
  width: 300px;
  height: 86px;
  font-size: 36px;
  font-family: "Bebas Neue", cursive;
  background: #1e5be6;
  border: 0;
  color: #fff;
  letter-spacing: 3px;
  line-height: 88px;
  box-shadow: 6px 0px 0px #00e6f6;
  outline: transparent;
  position: relative;
}

button::after {
  --slice-0: inset(50% 50% 50% 50%);
  --slice-1: inset(80% -6px 0 0);
  --slice-2: inset(50% -6px 30% 0);
  --slice-3: inset(10% -6px 85% 0);
  --slice-4: inset(40% -6px 43% 0);
  --slice-5: inset(80% -6px 5% 0);

  content: "AVAILABLE NOW";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    45deg,
    transparent 3%,
    #00e6f6 3%,
    #00e6f6 5%,
    #ff013c 5%
  );
  text-shadow: -3px -3px 0px #f8f005, 3px 3px 0px #00e6f6;
  clip-path: var(--slice-0);
}

button:hover::after {
  animation: 1s glitch;
  animation-timing-function: steps(2, end);
}

@keyframes glitch {
  0% {
    clip-path: var(--slice-1);
    transform: translate(-20px, -10px);
  }
  10% {
    clip-path: var(--slice-3);
    transform: translate(10px, 10px);
  }
  20% {
    clip-path: var(--slice-1);
    transform: translate(-10px, 10px);
  }
  30% {
    clip-path: var(--slice-3);
    transform: translate(0px, 5px);
  }
  40% {
    clip-path: var(--slice-2);
    transform: translate(-5px, 0px);
  }
  50% {
    clip-path: var(--slice-3);
    transform: translate(5px, 0px);
  }
  60% {
    clip-path: var(--slice-4);
    transform: translate(5px, 10px);
  }
  70% {
    clip-path: var(--slice-2);
    transform: translate(-10px, 10px);
  }
  80% {
    clip-path: var(--slice-5);
    transform: translate(20px, -10px);
  }
  90% {
    clip-path: var(--slice-1);
    transform: translate(-10px, 0px);
  }
  100% {
    clip-path: var(--slice-1);
    transform: translate(0);
  }
}
</style>