<script setup lang="ts">
import { inject } from "vue";
import { nsfwKey, showModalKey } from "@/keys";
import RefToggle from "@/components/RefToggle.vue";

interface Props {
  polaroidBorder?: boolean;
  dropshadow?: boolean;
  nsfw?: boolean;
  id: string;
}

const isNsfw = inject<boolean>(nsfwKey, false);
const showModal = inject<Function>(showModalKey, Function);

defineProps<Props>();
</script>

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

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

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

            <RefToggle
              class="figure__toggle"
              :id="id"
              v-model="isNsfw"
              @click.prevent="showModal()"
            >
              <template #off>😇</template>
              <template #on>😈</template>
            </RefToggle>
          </div>
        </div>
      </template>

      <figcaption class="figure__meta">
        <template v-if="!nsfw || isNsfw">
          <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>

<style lang="scss">
.figure {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;

  text-align: center;

  margin: 1em auto;
  padding: 0 var(--container-spacing-right-safe) 0
    var(--container-spacing-left-safe);

  &__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(0, 0, 0, 0.7), 0 0 1em rgba(0, 0, 0, 0.7);
      border-radius: 0.325em;

      background-color: #fff;
    }
  }

  &__border--polaroid &__meta {
    font-family: "Permanent Marker", fantasy;
    color: var(--color-figure-polaroid-text);

    max-width: 35rem;

    margin: 0.5rem auto;

    * {
      color: inherit;
    }
  }

  &__image {
    flex: 1 0 auto;

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

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

  &__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: var(--figure-cencor-width);
    height: var(--figure-cencor-height);
    max-width: 35rem;
    max-height: 70rem;
    position: relative;

    background-color: var(--figure-cencor-background-color);
    overflow: hidden;
  }

  &__toggle {
    position: relative;
    padding: 0;
  }

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

    &: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(-5rem, -2rem) rotate(40deg);
    }
  }
}
</style>
