<template>
  <div class="modal__backdrop">
    <div
      :class="{'modal--hide-header': hideHeader || fullscreen, 'modal--fullscreen': fullscreen, 'modal--small': small}"
      class="modal">
      <div class="modal__header">
        <slot name="header"/>
      </div>
      <div class="modal__body">
        <slot/>
        <div
          class="modal__close-button"
          @click="hideModal">
          <cross class="modal__close-icon"/>
        </div>
      </div>
      <div class="modal__footer">
        <slot name="footer">
          <!--<a class="button button&#45;&#45;active">Speichern</a>-->
          <a
            class="button"
            @click="hideModal">Abbrechen</a>
        </slot>
      </div>
    </div>
  </div>
</template>

<script>
  import Cross from '@/components/icons/Cross';

  export default {
    props: {
      hideHeader: {
        type: Boolean,
        default: false
      },
      fullscreen: {
        type: Boolean,
        default: false
      },
      small: {
        type: Boolean,
        default: false
      }
    },

    components: {
      Cross
    },

    methods: {
      hideModal() {
        this.$store.dispatch('hideModal');
      }
    }
  };
</script>

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

  .modal {
    align-self: center;
    justify-self: center;
    width: 700px;
    height: 80vh;
    background-color: $color-white;
    border-radius: 12px;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
    border: 1px solid $color-silver-light;
    display: -ms-grid;
    @supports (display: grid) {
      display: grid;
    }
    grid-template-rows: auto 1fr 65px;
    grid-template-areas: "header" "body" "footer";
    -ms-grid-rows: auto 1fr 65px;
    position: relative;

    &__backdrop {
      display: flex;
      justify-content: center;
      @supports (display: grid) {
        display: grid;
      }
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background-color: rgba($color-white, 0.8);
      z-index: 90;
    }

    &__header {
      grid-area: header;
      -ms-grid-row: 1;
      padding: 10px $modal-lateral-padding;
      border-bottom: 1px solid $color-silver-light;
    }

    &__body {
      grid-area: body;
      -ms-grid-row: 2;
      padding: 10px $modal-lateral-padding;
      overflow: auto;
      box-sizing: border-box;
      min-height: 30vh;
    }

    &__close-button {
      display: none;
      cursor: pointer;
      position: absolute;
      right: 15px;
      top: 15px;
      background: rgba($color-white, 0.5);
      border-radius: 40px;
      padding: 10px;
      align-content: center;
    }

    &__footer {
      grid-area: footer;
      -ms-grid-row: 3;
      border-top: 1px solid $color-silver-light;
      padding: 16px $modal-lateral-padding;
    }

    $parent: &;

    &--hide-header {
      grid-template-rows: 1fr 65px;
      grid-template-areas: "body" "footer";

      #{$parent}__header {
        display: none;
      }

      #{$parent}__body {
        padding: $default-padding;
      }

    }

    &--fullscreen {
      width: 95vw;
      height: auto;
      grid-template-rows: 1fr;
      -ms-grid-rows: 1fr;
      grid-template-areas: "body";
      overflow: hidden;

      #{$parent}__footer {
        display: none;
      }

      #{$parent}__body {
        padding: 0;
        scrollbar-width: none;
        margin-right: -5px;

        height: auto;
        max-height: 95vh;

        &::-webkit-scrollbar {
          display: none;
        }
      }

      #{$parent}__close-button {
        display: flex;
      }
    }

    &--small {
      height: auto;

      #{$parent}__body {
        min-height: 0;
      }
    }
  }
</style>
