<template>
  <TransitionRoot as="template" :show="open">
    <Dialog as="div" static
            class="fixed z-[1000] inset-0 overflow-y-auto" :open="open"
            @close="staticCloseModal"
    >
      <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <TransitionChild as="template" enter="ease-out duration-300"
                         enter-from="opacity-0" enter-to="opacity-100"
                         leave="ease-in duration-200" leave-from="opacity-100"
                         leave-to="opacity-0"
        >
          <DialogOverlay class="fixed inset-0 bg-indigo-200 bg-opacity-75 transition-opacity" />
        </TransitionChild>

        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

        <TransitionChild as="template" enter="ease-out duration-300"
                         enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" enter-to="opacity-100 translate-y-0 sm:scale-100"
                         leave="ease-in duration-200" leave-from="opacity-100 translate-y-0 sm:scale-100"
                         leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
        >
          <div class="inline-block align-bottom bg-indigo-300 md:rounded-md text-left overflow-hidden shadow-xl transform transition-all md:align-middle md:max-w-6xl  w-full">
            <div class="md:grid grid-cols-12">
              <button class="flex md:hidden w-full items-center justify-center p-3 bg-indigo-300  text-gray-light text-sm border-b border-indigo-100" @click="staticCloseModal">
                Закрыть
              </button>

              <modal-feed-media
                :type="feed.type"
                :feed_id="feed.id"
                :title="feed.entity.title"
                :preview="feed.entity.preview"
                :medias="feed.entity.collection_medias"
              />

              <modal-feed-body
                :user="feed.user"
                :feed_id="feed.id"
                :entity="feed.entity"
                @openShare="showShareModal"
                @onRemoveFeed="onRemoveFeed"
                @disableModal="checkCloseModal"
              />
            </div>
          </div>
        </TransitionChild>
      </div>
      <modal-warning
        :feed_id="modalFeedId"
        :open="warningShow"
        @action="deleteActionModal"
      />
      <modal-share ref="shareModalNode" :entity="feed.entity" />
    </Dialog>
  </TransitionRoot>
</template>


<script>
import {
    Dialog,
    DialogOverlay,
    DialogTitle,
    TransitionChild,
    TransitionRoot,
} from '@headlessui/vue'

import ModalWarning from '@/Shared/Overlay/ModalWarning.vue'
import ModalShare from '@/Shared/Overlay/ModalShare.vue'
import ModalFeedMedia from '@/Shared/Overlay/ModalFeedMedia.vue'
import ModalFeedBody from '@/Shared/Overlay/ModalFeedBody.vue'

export default {
    components: {
        Dialog,
        DialogOverlay,
        DialogTitle,
        TransitionChild,
        TransitionRoot,
        ModalFeedMedia,
        ModalFeedBody,
        ModalWarning,
        ModalShare,
    },

    provide() {
        return {
            is_exist_menu: this.is_exist_menu
        }
    },
    props: {
        modalFeed: Object,
        is_exist_menu: {
            type: Boolean,
            default: true,
        },
        open: {
            type: Boolean,
            default: false,
        },
    },
    emits: ['closeModal', 'destroyFeed'],

    data() {
        return {
            disabled: 0,
            modalFeedId: 0,
            warningShow: false,
            feed: {},
        }
    },
    watch: {
        open(open) {
            if (open) {
                this.feed = this.modalFeed
            }
        },
    },
    methods: {
        deleteActionModal(removeFeed) {
            if (removeFeed) {
                this.$emit('destroyFeed')
                this.$nextTick(() => {
                    this.staticCloseModal()
                })
            }
            this.warningShow = false
        },

        showShareModal() {
            this.$refs.shareModalNode.openModal()
        },

        onRemoveFeed(feed_id) {
            this.modalFeedId = feed_id
            this.warningShow = true
        },

        checkCloseModal(value) {
            this.disabled = value
        },
        staticCloseModal() {
            if (!this.disabled) {
                this.$emit('closeModal', false)
            }
        },
    },
}
</script>
