<template>
  <TransitionRoot as="template" :show="open">
    <Dialog as="div" static class="fixed z-[1000] inset-0 overflow-y-auto" @close="staticCloseModal"  :open="open">
      <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:my-8 md:align-middle md:max-w-5xl w-full">


            <div class="md:grid grid-cols-12">
                <button @click="staticCloseModal" 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">Закрыть</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
                    @onRemoveFeed='onRemoveFeed'
                    @disableModal='checkCloseModal'
                    :user='feed.user'
                    :feed_id='feed.id'
                    :entity='feed.entity'
                 />

            </div>
          </div>
        </TransitionChild>
      </div>
      <modal-warning
        @closeWarningModal="closeWarningModal"
        @closeModal="staticCloseModal"
        :feed_id='modalFeedId'
        :open="warningShow"
        />
    </Dialog>
  </TransitionRoot>
</template>


<script>
import ModalWarning from "@/Shared/Overlay/ModalWarning";
import { Dialog, DialogOverlay, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
import ModalFeedMedia from '@/Shared/Overlay/ModalFeedMedia'
import ModalFeedBody from '@/Shared/Overlay/ModalFeedBody'

export default {
  components: {
    Dialog,
    DialogOverlay,
    DialogTitle,
    TransitionChild,
    TransitionRoot,
    ModalFeedMedia,
    ModalFeedBody,
    ModalWarning,
  },
  emits: ['onRemoveFeed', 'closeModal', 'destroyFeed'],
  props: {
    modalFeed: Object,
    open: {
      type: Boolean,
      default: false,
    },
  },
  data() {
       return {
           disabled: 0,
           modalFeedId: 0,
           warningShow: false,
           feed: {}
       }
  },
  watch: {
      open(open){
        if (open) {
            this.feed = this.modalFeed;
        }else{
        }
      }
  },
  methods: {
      closeWarningModal()
      {
          this.warningShow = false;
          this.$emit('destroyFeed');
      },
     onRemoveFeed(feed_id){
          this.modalFeedId = feed_id;
          this.warningShow = true;
      },

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