<template>
  <div class="itf-bento-card-wrapper rounded bg-white" :class="{ enabled }">
    <div class="itf-bento-card__drag">
      <svg width="35" height="23" viewBox="0 0 35 23" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g filter="url(#filter0_d_1320_32101)">
          <rect x="4" y="2" width="27" height="15" rx="4" fill="#22222B"/>
          <circle cx="23.5" cy="9.5" r="1.5" fill="white"/>
          <circle cx="17.5" cy="9.5" r="1.5" fill="white"/>
          <circle cx="11.5" cy="9.5" r="1.5" fill="white"/>
        </g>
        <defs>
          <filter id="filter0_d_1320_32101" x="0" y="0" width="35" height="23" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
            <feOffset dy="2"/>
            <feGaussianBlur stdDeviation="2"/>
            <feComposite in2="hardAlpha" operator="out"/>
            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1320_32101"/>
            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1320_32101" result="shape"/>
          </filter>
        </defs>
      </svg>
    </div>

    <slot/>

    <div class="settings shadow bg-black gap-2 align-items-center">
      <button @click="$emit('resize', [1, 1])" class="rounded-1" :class="{'active': w === 1 && h === 1}">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M14 16L10 16C8.89543 16 8 15.1046 8 14L8 10C8 8.89543 8.89543 8 10 8L14 8C15.1046 8 16 8.89543 16 10L16 14C16 15.1046 15.1046 16 14 16Z" stroke="white" stroke-width="1.2"/>
        </svg>
      </button>
      <button @click="$emit('resize', [2, 2])" class="rounded-1" :class="{'active': w === 2 && h === 2}">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M17 16L7 16C5.89543 16 5 15.1046 5 14L5 10C5 8.89543 5.89543 8 7 8L17 8C18.1046 8 19 8.89543 19 10L19 14C19 15.1046 18.1046 16 17 16Z" stroke="white" stroke-width="1.2"/>
        </svg>
      </button>
      <button @click="$emit('resize', [4, 4])" class="rounded-1" :class="{'active': w === 4 && h === 4}">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M17 19L7 19C5.89543 19 5 18.1046 5 17L5 7C5 5.89543 5.89543 5 7 5L17 5C18.1046 5 19 5.89543 19 7L19 17C19 18.1046 18.1046 19 17 19Z" stroke="white" stroke-width="1.2"/>
        </svg>
      </button>
    </div>
  </div>
</template>
<style scoped lang="scss">
.itf-bento-card {
  &__drag {
    transition: opacity .3s;
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
  }
}
.itf-bento-card-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border: 1px solid #E7E8EC;

  &.enabled:hover {
    border-color: #0B1315;

    .settings, .itf-bento-card__drag {
      opacity: 1;
    }
  }
  .vue-draggable-dragging &:hover .settings {
    opacity: 0;
  }

  .settings {
    transition: opacity .3s;
    opacity: 0;
    display: flex;
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    width: 24px;
    height: 9px;
    border-radius: .5rem;

    &:hover {
      width: auto;
      height: auto;
      padding: .175rem;
      button {
        display: flex;
      }
    }
    button {
      display: none;
      color: #fff;
      padding: 0;
      width: 25px;
      height: 25px;
      border: 0 none;
      background: transparent;
      justify-content: center;
      align-items: center;

      &.active {
        background-color: #494A55;
        color: #FFF;
      }
    }
  }
}
</style>
<script>
import { Vue, Prop, Component } from 'vue-property-decorator';

export default @Component({
  name: 'itfBentoCard',
  components: {
  }
})
class itfBentoCard extends Vue {
  @Prop() w;
  @Prop() h;
  @Prop() enabled;
}
</script>
