<template>
  <figure class="figure">
    <div
      class="figure__border"
      :class="{ 'figure__border--polaroid': polaroidBorder }"
    >
      <template v-if="!nsfw || $root.nsfw">
        <div
          class="figure__image"
          :class="{ 'figure__image--dropshadow': dropshadow }"
        >
          <slot name="img"></slot>
        </div>
      </template>

      <template v-else>
        <div class="figure__cencor">
          <div class="hazard-tape"></div>
          <div class="hazard-tape"></div>
          <div class="hazard-tape"></div>
          <div class="hazard-tape"></div>

          <div class="figure__reveal">
            <p>🔥 Here be spicy dragons 🌶</p>

            <nsfw-switch
              :id="id"
              v-model="$root.nsfw"
              @change="$root.showWarning()"
            />
          </div>
        </div>
      </template>

      <figcaption class="figure__meta">
        <template v-if="!nsfw || $root.nsfw">
          <div class="caption"><slot name="caption"></slot></div>
          <div class="copyright">© <slot name="copyright"></slot></div>
        </template>

        <template v-else>
          <p>😳 2 hot 4 u 🍆</p>
        </template>
      </figcaption>
    </div>
  </figure>
</template>

<script>
import NsfwSwitch from "@/components/NsfwSwitch.vue";

export default {
  props: {
    polaroidBorder: Boolean,
    dropshadow: Boolean,
    nsfw: Boolean,
    id: String,
  },
  components: {
    NsfwSwitch,
  },
};
</script>

<style lang="scss">
@import "@/scss/_variables.scss";
@import "@/scss/_mixins.scss";

.figure {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;

  margin: 1em auto;
  text-align: center;

  &__border {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;

    margin: auto;

    &--polaroid {
      margin: 1em auto;
      padding: 1em;

      box-shadow: inset 0 0 1em rgba(#000, 0.7), 0 0 1em rgba(#000, 0.7);
      border-radius: 0.325em;

      background-color: #fff;

      .figure__meta {
        margin: 0.5em 0;
        font-family: "Permanent Marker", fantasy;
        color: $copy-color-darkgrey;

        * {
          color: inherit;
        }
      }
    }
  }

  &__image {
    flex: 1 0 auto;

    img {
      max-width: 100%;
      max-height: 35em;
    }

    &--dropshadow {
      filter: drop-shadow(0.5em 0.25em 0.375em #000);
    }
  }

  &__meta {
    flex: 0 0 auto;
  }

  &__cencor {
    flex: 1 0 auto;

    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;

    padding: 0;
    width: 50vw;
    height: 35vh;
    max-width: 35em;
    max-height: 70em;
    position: relative;

    background-color: $bg-color-lighter;
    overflow: hidden;

    @include mq-desktop {
      width: 20em;
      height: 20em;
    }

    .figure__border & .nsfw-switch {
      position: relative;
      padding: 0;
    }

    .hazard-tape {
      position: absolute;
      left: -1em;
      right: -1em;
      top: 0;
      transform: rotate(0deg);
      height: 1em;
      background-image: repeating-linear-gradient(
        -55deg,
        #000,
        #000 0.75em,
        #ffb101 0.75em,
        #ffb101 1.5em
      );

      &:nth-child(1) {
        top: 10%;
        transform: rotate(5deg);
      }

      &:nth-child(2) {
        top: 15%;
        transform: rotate(-10deg);
      }

      &:nth-child(3) {
        top: 75%;
        transform: rotate(-15deg);
      }

      &:nth-child(4) {
        top: 85%;
        transform: translate(-5em, -2em) rotate(40deg);
      }
    }
  }
}
</style>
