<script>
import HorizontalLayouts from '@inside-layouts/displays/HorizontalLayouts'
import CloseFlashInfo from '../../inside-customs/components/modals/CloseFlashInfo'

import { http } from '@inside-library/helpers/Http'

import moment from 'moment'

export default {
  name: 'horizontal-layouts',
  components: { CloseFlashInfo },
  extends: HorizontalLayouts,
  data() {
    return {
      popinInfo: null,
      alreadyFetched: false
    }
  },
  watch: {
    getUserInfos: {
      handler() {
        if (!this.alreadyFetched) {
          this.fetchPopin()
        }
      },
      immediate: true
    },
    popinInfo(value) {
      const reactionDate = value.reaction_date
        ? new Date(value.reaction_date)
        : null

      if (
        value.popin &&
        (!reactionDate || moment(this.reactionDate).isSame(moment()))
      ) {
        this.triggerModal(
          'flash-info',
          'fetch',
          {
            item: {},
            content: 'popin',
            filters: {
              sort: 'published_at:desc',
              'status:eq': 1,
              limit: 1,
              langcode: this.$_currentLang
            }
          },
          {
            size: 'l',
            transition: 'fadeInLeft',
            closeComponent: CloseFlashInfo
          }
        )
      }
    }
  },
  methods: {
    async fetchPopin() {
      try {
        const data = await http.get('popin', {
          filters: { 'status:eq': 1, limit: 1, sort: 'published_at:desc' }
        })
        this.popinInfo = data
        this.alreadyFetched = true
      } catch (err) {
        throw new Error(err)
      }
    }
  }
}
</script>
