<script setup>
import Name from './Name.vue';
import { useBurgerStore } from '@/stores/burger';
//import { Ref } from 'vue';

const burger = useBurgerStore()

const turnMyCard = (event) => {  
  let link = event.currentTarget
  link.classList.add('turned')
}
</script>

<template>

  <div class="images-grid-gallery">
    <a class="image-link" href="#"
    @click="turnMyCard($event)"
    >
      <div class="image-container" data-label="Who am I">
        <img class="image hide"
          src="@/assets/MaPhoto.jpg"
          alt=""
          >
        <img class="image_background"
          src="@/assets/question.png"
          alt="">
      </div>
    </a>
    <a class="image-link" href="#">
      <div class="image-container" data-label="Who am I">
        <img class="image_background" src="@/assets/question.png" alt="">
      </div>
    </a>
    <a class="image-link" href="#">
      <div class="image-container" data-label="Who am I">
        <img class="image_background" src="@/assets/question.png" alt="">
      </div>
    </a>
    <a class="image-link" href="#">
      <div class="image-container" data-label="Who am I">
        <img class="image_background" src="@/assets/question.png" alt="">
      </div>
    </a>


  </div>
</template>

<style lang="scss">
@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700");

@import '@/style/colors.scss';

  .images-grid-gallery {
    //max-width: $maxWidth;
    margin: 0 1em;
    display: grid;
    grid-template-columns: repeat (2, 1fr);
    //grid-auto-columns: minmax(10px, auto);
    gap:1em;
    //border : 3px solid white;
    height:100vh;
  }
  
  .image-link {
    display: flex;
    border : 3px solid white;
    background : white;
    border-radius: 10px;
    margin:0 auto;
    margin-bottom: 1em;
    width: $imageWidth;
    overflow: hidden;
    transform: rotateY(0deg);
    transition: 1s;
    &.turned{
      transform: rotateY(180deg);
    }
    & > .image-container {
      border : 3px solid white;
      border-radius: 22px;
      overflow: hidden;
      opacity: 1;
    }
    
    &:nth-child(1), &:nth-child(2){
      aspect-ratio: 1/1;
      aspect-ratio: 8/11;
    }
    &:nth-child(3), &:nth-child(4){
      aspect-ratio: 8/11;
    }

    @for $i from 1 to 5 {
      &:nth-child(#{$i}) > .image-container > .image_background{
        transform:scale(1.0);
        transition: 0.5s;
        position:relative;
        bottom:-400px;
        left:-120px;
        animation-duration: 1000ms;
        animation-name: show-gallery;
        animation-timing-function: cubic-bezier(0.2, 0.9, 0.44, 1);
        animation-delay: $i*200 + 1000ms;
        animation-fill-mode: forwards;
        
      }
    }
    &:hover .image_background{
      transform: scale(1.1);
    }
    &:hover > .image_background:before {
        opacity: 1;
        left: -5px;
        top: 50px;          
    }
  }   

  .hide{
    display : none;
  }

  @media (min-width: 720px){
    .images-grid-gallery{
      grid-template-columns: repeat(4, 1fr);
    }
  }

  @keyframes show-gallery {
    0%{
      
    }
    100%{
      bottom: 300px;;
    }
  }
  // @keyframes menu-shake{
  //     from {
  //         //opacity: 0;
  //         filter: drop-shadow(-150px 0px 10px #4d0000);
  //         //background-color: rgb(99, 0, 0);
  //     }
  //     10%{
  //       //opacity: 50%;
  //       filter: drop-shadow(150px 0px 3px #4d0000);
  //     }
  //     20%{
  //       filter: drop-shadow(-100px 0px 3px #4d0000);
        
  //     }
  //     30%{
  //       filter: drop-shadow(50px 0px 3px #4d0000);
        
  //     }
  //     40%{
  //       filter: drop-shadow(-25px 0px 3px #4d0000);
        
  //     }
  //     50%{
  //       filter: drop-shadow(10px 0px 3px #4d0000);
        
  //     }
  //     80%{
        
  //       filter: drop-shadow(-10px 0px 3px #4d0000);
  //     }
  //     100%{
  //       //opacity : 100%;
  //       filter: drop-shadow(0px 0px 3px #4d0000);
        
  //     }
  //   }
</style>