<script>
import {defineComponent} from 'vue'
import Slider from './components/Slider.vue'
import Popup from "./components/Popup.vue";
import Card from "./components/Card.vue";

export default defineComponent({
  name: 'StoriesBlock',
  components: {Popup, Slider, Card},
  props: {
    data: {type: Object, required: true},
    node: {type: HTMLElement, required: true},
    settings: {type: Object, required: true},
  },
  data: () => {
    return {
      showModal: false,
      cardIndex: false,
      isLoad: false,
    }
  },
  methods:{
    /**
     * Метод открывает модальное окно
     * @param {Boolean} popupState
     * @param {Number} index
     */
    showPopup(state, index) {
      this.showModal = state;
      this.cardIndex = index;
      setTimeout(()=>{this.isLoad = !this.isLoad;}, 350);
    },
  }
})
</script>

<template>
  <Slider @popupState="showPopup"
          :items="data.data.items"
          :node="node"
          :settings="{
            view: settings.list.view,
            columns: settings.columns,
            name: settings.showName,
          }"
  />
  <Popup @popupState="showPopup"
         v-if="showModal"
         :activeIndex="cardIndex"
  >
    <Card :items="data.data.items"
          :activeIndex="cardIndex"
          :settings="settings"
    />
  </Popup>
</template>

<style lang="scss">
@use './mixin' as mixin;

@include mixin.root {
  .fragment {
    &-title-font,
    &-slide-title,
    &-card-mini-text {
      font-family: var(--font-family-base-second);
    }

    &-all {
      font-size: 0;
      font-weight: 400;

      a {
        text-decoration: none;
        transition-duration: var(--duration-base);
        transition-property: color;
      }
    }

    &-title-custom {
      display: grid;
      grid-auto-flow: column;
      grid-template-columns: 1fr auto;
      justify-content: space-between;
      align-items: center;
      column-gap: 40px;
    }

    &-list {
      display: flex;
      flex-shrink: 0;
      column-gap: 6px;
      align-items: center;
      text-decoration: none;

      a {
        background-color: transparent;
      }

      span {
        font-size: 1rem;
        line-height: 1.2;
        color: var(--color-neutral-semi-dark);
        transition-duration: var(--duration-base);
        transition-property: color;

        @media (max-width: 768px) {
          display: none;
        }
      }

      svg {
        width: 20px;
        height: 20px;
        stroke: var(--color-neutral-semi-dark);
        transition-duration: var(--duration-base);
        transition-property: stroke;

        @media (max-width: 768px) {
          width: var(--font-size-h2);
          height: var(--font-size-h2);
        }
      }

      &:hover {
        span {
          color: var(--color-primary-bright);
        }
        svg {
          stroke: var(--color-primary-bright);
        }
      }
    }

    &-desktop{
      display: block;
      word-break: break-all;
      contain: content;

      @supports (display: -webkit-box) {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
      }
    }

    &-mobile{
      font-size: 0;

      svg {
        height: 20px;
        width: 20px;
      }
    }
  }
}

@include mixin.layout {
  padding: 0 60px calc(1.2rem + 16px);
  position: relative;

  .skeleton {
    &-block {
      display: grid;
      grid-auto-flow: column;
      grid-gap: 24px;

      &[data-round="false"] {
        .skeleton-item {
          max-width: 150px;
        }
      }

      &[data-round="true"] {
        .skeleton-item {
          max-width: 145px;
        }
      }
    }
  }

  @media (max-width: 768px) {
    padding-right: 0;
    padding-left: 0;
  }
}

</style>