<template>
  <div class="image-checkbox">
    <input
      :id="id"
      :type="type"
      :name="name"
      :checked="value"
      @change="$emit('input', $event.target.checked)"
    />
    <label :for="id" class="label">
      <img :src="image" :alt="alt" />
      <p v-show="title">{{title}}</p>
      <span class="image-checkbox__indicator" v-if="! withoutCheckmark">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="16"
          height="16"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="square"
          stroke-linejoin="round"
          class="feather feather-check icon"
        >
          <polyline points="20 6 9 17 4 12" />
        </svg>
      </span>
    </label>
  </div>
</template>

<script>
export default {
  name: 'EbImageCheck',
  props: {
    alt: {
      type: String,
      required: false
    },
    name: {
      type: String,
      required: true
    },
    id: {
      type: String,
      required: false,
      default: 'id-1'
    },
    image: {
      type: String,
      required: true
    },
    title: {
      type: String,
      required: false
    },
    type: {
      type: String,
      default: 'checkbox',
      validator: val => ['checkbox', 'radio'].includes(val)
    },
    withoutCheckmark: {
      type: Boolean,
      default: false
    }
  }
};
</script>

<style lang="scss" scoped>
.image-checkbox {
  position: relative;
  min-width: 200px;
  /* margin: 0 5px; */
}

.image-checkbox label {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  cursor: pointer;
}

.image-checkbox label img {
  width: 100%;
  border-radius: 10px;
  -webkit-filter: grayscale(1) opacity(50%);
  filter: grayscale(1) opacity(50%);
  border: 2px solid #ddd;
}

.image-checkbox input {
  display: none;
}

.image-checkbox input:checked ~ label .image-checkbox__indicator {
  -webkit-animation: check 0.5s cubic-bezier(0.895, 0.03, 0.685, 0.22) forwards;
  animation: check 0.5s cubic-bezier(0.895, 0.03, 0.685, 0.22) forwards;
}

.image-checkbox input:checked ~ label .image-checkbox__indicator .icon {
  opacity: 1;
  -webkit-transform: scale(0);
  transform: scale(0);
  color: white;
  -webkit-text-stroke: 0;
  -webkit-animation: icon 0.3s cubic-bezier(1, 0.008, 0.565, 1.65) 0.1s 1
    forwards;
  animation: icon 0.3s cubic-bezier(1, 0.008, 0.565, 1.65) 0.1s 1 forwards;
}

.image-checkbox input:checked ~ label img {
  background-color: white;
  border: 2px solid #4d4de0;
  box-shadow: 0 0 0 4px rgba(77, 77, 224, 0.15);
  outline: 0;
  -webkit-filter: grayscale(0);
  filter: grayscale(0) drop-shadow(3px 3px 5px #eee);
  transition-property: filter;
  transition-duration: 0.1s;
}

.image-checkbox .image-checkbox__indicator {
  position: absolute;
  top: 10px;
  right: 10px;
  border-radius: 100%;
  border: none;
  display: inline-block;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.1);
  background: white;
  vertical-align: middle;
  width: 1.8em;
  height: 1.8em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border 0.3s ease;
}

.image-checkbox .image-checkbox__indicator svg.icon {
  opacity: 0;
  font-size: calc(1rem + 1vw);
  fill: transparent;
  transition: opacity 0.3s 0.1s ease;
  -webkit-text-stroke: 3px rgba(0, 0, 0, 0.5);
}

.image-checkbox .image-checkbox__indicator:hover {
  border: 2px solid rgba(0, 0, 0, 0.2);
}

@-webkit-keyframes icon {
  from {
    opacity: 0;
    -webkit-transform: scale(0.3);
    transform: scale(0.3);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes icon {
  from {
    opacity: 0;
    -webkit-transform: scale(0.3);
    transform: scale(0.3);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@-webkit-keyframes check {
  0% {
    width: 1.5em;
    height: 1.5em;
    border-width: 5px;
  }
  10% {
    width: 1.5em;
    height: 1.5em;
    opacity: 0.1;
    background: rgba(0, 0, 0, 0.2);
    border-width: 15px;
  }
  12% {
    width: 1.5em;
    height: 1.5em;
    opacity: 0.4;
    background: rgba(0, 0, 0, 0.1);
    border-width: 0;
  }
  50% {
    width: 1.8em;
    height: 1.8em;
    background: #4d4de0;
    border: 0;
    opacity: 0.6;
  }
  100% {
    width: 1.8em;
    height: 1.8em;
    background: #4d4de0;
    border: 0;
    opacity: 1;
  }
}
@keyframes check {
  0% {
    width: 1.5em;
    height: 1.5em;
    border-width: 5px;
  }
  10% {
    width: 1.5em;
    height: 1.5em;
    opacity: 0.1;
    background: rgba(0, 0, 0, 0.2);
    border-width: 15px;
  }
  12% {
    width: 1.5em;
    height: 1.5em;
    opacity: 0.4;
    background: rgba(0, 0, 0, 0.1);
    border-width: 0;
  }
  50% {
    width: 2em;
    height: 2em;
    background: #4d4de0;
    border: 0;
    opacity: 0.6;
  }
  100% {
    width: 2em;
    height: 2em;
    background: #4d4de0;
    border: 0;
    opacity: 1;
  }
}
</style>  