<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 rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
            <div class="">
              <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                <DialogTitle as="h3" class="text-lg leading-6 font-medium text-gray-light">
                  Поделиться
                </DialogTitle>
                <div class="my-4">
                  <input :value="route(`${entity.type}.show`, entity.slug)" class="js-input-text-share w-full focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md placeholder-gray-light"
                         type="text" readonly
                  >
                </div>
                <div class="flex items-center justify-end -mx-1">
                  <div class="transition-shadow shadow-none hover:shadow-classic2 p-2 bg-[#4C75A3] text-white mx-1 cursor-pointer" title="Скопировать текст"
                       @click="copyText"
                  >
                    <svg xmlns="http://www.w3.org/2000/svg" width="24"
                         height="24" viewBox="0 0 24 24"
                         fill="none" stroke="currentColor"
                         stroke-width="2" stroke-linecap="round"
                         stroke-linejoin="round" class="feather feather-copy"
                    ><rect x="9" y="9"
                           width="13" height="13"
                           rx="2" ry="2"
                    ></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
                  </div>

                  <div class="transition-shadow shadow-none hover:shadow-classic2 p-2 bg-[#4C75A3] text-white mx-1 cursor-pointer" @click="shareVK">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24"
                         height="24" viewBox="0 0 576 512"
                    ><path fill="currentColor" d="M545 117.7c3.7-12.5 0-21.7-17.8-21.7h-58.9c-15 0-21.9 7.9-25.6 16.7 0 0-30 73.1-72.4 120.5-13.7 13.7-20 18.1-27.5 18.1-3.7 0-9.4-4.4-9.4-16.9V117.7c0-15-4.2-21.7-16.6-21.7h-92.6c-9.4 0-15 7-15 13.5 0 14.2 21.2 17.5 23.4 57.5v86.8c0 19-3.4 22.5-10.9 22.5-20 0-68.6-73.4-97.4-157.4-5.8-16.3-11.5-22.9-26.6-22.9H38.8c-16.8 0-20.2 7.9-20.2 16.7 0 15.6 20 93.1 93.1 195.5C160.4 378.1 229 416 291.4 416c37.5 0 42.1-8.4 42.1-22.9 0-66.8-3.4-73.1 15.4-73.1 8.7 0 23.7 4.4 58.7 38.1 40 40 46.6 57.9 69 57.9h58.9c16.8 0 25.3-8.4 20.4-25-11.2-34.9-86.9-106.7-90.3-111.5-8.7-11.2-6.2-16.2 0-26.2 .1-.1 72-101.3 79.4-135.6z"></path></svg>
                  </div>
                </div>
              </div>
            </div>
            <div class="mt-5 sm:mt-4 sm:flex">
              <button type="button"
                      class="mx-3 my-1 transition shadow-none hover:shadow-classic inline-flex items-center px-8 py-3 justify-center  text-base rounded-md text-white bg-indigo-300 focus:outline-none"
                      @click="staticCloseModal"
              >
                Отменить
              </button>
            </div>
          </div>
        </TransitionChild>
      </div>
    </Dialog>
  </TransitionRoot>
</template>

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

export default {
    components: {
        Dialog,
        DialogOverlay,
        DialogTitle,
        TransitionChild,
        TransitionRoot,
    },
    //   emits: {
    //     close: null,
    //   },
    props: {
        entity: Object,
    },

    data() {
        return {
            open: false,
        }
    },

    methods: {
        openModal() {
            this.open = true
        },
        staticCloseModal() {
            this.open = false
        },
        copyText(){
            const text = document.querySelector('.js-input-text-share')
            text.select()
            text.setSelectionRange(0, 99999)
            navigator.clipboard.writeText(text.value)
        },
        shareTwitter() {
            const urlInner = route(`${this.entity.type}.show`, this.entity.slug)
            const body = this.entity.body ?? ''
            const url = `https://twitter.com/intent/tweet?text=${body}&url=${urlInner}`
            this.openWindow(url)
        },

        shareFB() {
            const urlInner = route(`${this.entity.type}.show`, this.entity.slug)
            const body = this.entity.body ?? ''
            const url = `https://www.facebook.com/sharer.php?u=${urlInner}&t=${body}`
            this.openWindow(url)
        },

        shareVK() {
            const urlInner = route(`${this.entity.type}.show`, this.entity.slug)
            const title = this.entity.title ?? ''
            const url = `https://vk.com/share.php?url=${urlInner}&title=${title}`
            this.openWindow(url)
        },

        openWindow(url) {
            this.popupCenter({url, title: 'share', w: 600, h: 400})
        },

        popupCenter({ url, title, w, h }) {
            const dualScreenLeft =
        window.screenLeft !== undefined ? window.screenLeft : window.screenX
            const dualScreenTop =
        window.screenTop !== undefined ? window.screenTop : window.screenY

            const width = window.innerWidth
                ? window.innerWidth
                : document.documentElement.clientWidth
                    ? document.documentElement.clientWidth
                    : screen.width
            const height = window.innerHeight
                ? window.innerHeight
                : document.documentElement.clientHeight
                    ? document.documentElement.clientHeight
                    : screen.height

            const systemZoom = width / window.screen.availWidth
            const left = (width - w) / 2 / systemZoom + dualScreenLeft
            const top = (height - h) / 2 / systemZoom + dualScreenTop
            const newWindow = window.open(
                url,
                title,
                `
      scrollbars=yes,
      width=${w / systemZoom},
      height=${h / systemZoom},
      top=${top},
      left=${left}
      `
            )

            if (window.focus) newWindow.focus()
        },
    },
}
</script>
