<script lang="ts">
  import { idVideoActive } from '../../../store';
  import scrollLock from '$utils/scrollLock';

  let idVideo: null | string = null;

  idVideoActive.subscribe((value) => {
    idVideo = value;
  });
</script>

<div class="modal-video">
  <div
    class="modal-video__bg"
    on:click={() => {
      idVideoActive.set(null);
      scrollLock(false);
    }}
    on:keyup={() => false}
    tabindex="0"
    role="button"
  />
  <div class="modal-video__content">
    <iframe
      width="440"
      height="248"
      loading="lazy"
      src="https://www.youtube.com/embed/{idVideo}?autoplay=1"
      title="YouTube video player"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      allowfullscreen
    />
  </div>
</div>

<style lang="scss">
  @import '/src/scss/media';
  @import '/src/scss/variables';

  .modal-video {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    &__bg {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: -1;
      background: $fontPrimary50;
    }

    &__content {
      height: 720px;
      width: 1123px;

      @include breakpoint-down('deskS') {
        width: 83%;
        height: 78%;
      }

      iframe {
        width: 100% !important;
        height: 100% !important;
      }
    }
  }
</style>