---
import Icon from '@components/icons/icon.astro'

const { pageTitle, title = 'Share' } = Astro.props

interface Props {
    pageTitle: string
    title?: string
}

type SocialPlatform = {
    name: string
    url: string
    svg: string
}

const socialPlatforms: SocialPlatform[] = [
    {
        name: 'Facebook',
        url: `https://www.facebook.com/share.php?u=${Astro.url}&title=${pageTitle}`,
        svg: 'facebook',
    },
    {
        name: 'X',
        url: `https://twitter.com/home/?status=${pageTitle}${Astro.url}`,
        svg: 'x',
    },
    {
        name: 'LinkedIn',
        url: `https://www.linkedin.com/shareArticle?mini=true&url=${Astro.url}&title=${pageTitle}`,
        svg: 'linkedIn',
    },
];
---

<div class="hs-dropdown relative inline-flex [--auto-close:inside] [--placement:top-left]">
    <button
        id="hs-dropup"
        type="button"
        class="hs-dropdown-toggle inline-flex items-center gap-x-2 rounded-lg px-4 py-3 text-sm font-medium text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:bg-neutral-100 hover:text-neutral-700 focus-visible:ring dark:text-neutral-400 dark:ring-zinc-200 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:outline-none"
    >
        <Icon name="share" />

        {title}
    </button>

    <div
        class="hs-dropdown-menu duration z-10 hidden w-72 divide-y divide-neutral-200 rounded-lg bg-neutral-50 p-2 opacity-0 shadow-md transition-[opacity,margin] hs-dropdown-open:opacity-100 dark:divide-neutral-700 dark:border dark:border-neutral-700 dark:bg-neutral-800"
        aria-labelledby="hs-dropup"
    >
        <div class="py-2 first:pt-0 last:pb-0">
            {
                socialPlatforms.map(platform => (
                    <a
                        class="flex items-center gap-x-3.5 rounded-lg px-3 py-2 text-sm text-neutral-700 hover:bg-neutral-200 focus:bg-neutral-100  focus:outline-none dark:text-neutral-300 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700 "
                        href={platform.url}
                    >
                        <Icon name={platform.svg} />
                        Share on {platform.name}
                    </a>
                ))
            }
        </div>
        <div class="py-2 first:pt-0 last:pb-0">
            <button
                type="button"
                class="js-clipboard hover:text-dark focus-visible:ring-secondary group inline-flex w-full items-center gap-x-3.5 rounded-lg px-3 py-2 text-sm text-neutral-700 hover:bg-neutral-200 focus:bg-neutral-100 focus:outline-none focus-visible:outline-none focus-visible:ring-1 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700"
                data-clipboard-success-text="Copied"
            >
                <svg
                    class="js-clipboard-default h-4 w-4 transition group-hover:rotate-6"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                >
                    <rect width="8" height="4" x="8" y="2" rx="1" ry="1"></rect>
                    <path
                        d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
                    ></path>
                </svg>

                <svg
                    class="js-clipboard-success text-neutral-700 dark:text-neutral-300 hidden h-4 w-4"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                >
                    <polyline points="20 6 9 17 4 12"></polyline>
                </svg>
                <span class="js-clipboard-success-text">Copy link</span>
            </button>
        </div>
    </div>
</div>

<!--Import the necessary Dropdown and Clipboard plugins-->
<!--https://preline.co/plugins/html/dropdown.html-->
<!--<script is:inline src="/scripts/vendor/preline/dropdown/index.js"></script>-->

<!-- https://clipboardjs.com/ -->
<!--<script is:inline src="/scripts/vendor/clipboard.min.js"></script>-->

<script is:inline>
    (function () {
        window.addEventListener("load", () => {
            const $clipboards = document.querySelectorAll(".js-clipboard");
            $clipboards.forEach((el) => {
                const clipboard = new ClipboardJS(el, {
                    text: () => {
                        return window.location.href;
                    },
                });
                clipboard.on("success", () => {
                    const $default = el.querySelector(".js-clipboard-default");
                    const $success = el.querySelector(".js-clipboard-success");
                    const $successText = el.querySelector(".js-clipboard-success-text");
                    const successText = el.dataset.clipboardSuccessText || "";
                    let oldSuccessText;

                    if ($successText) {
                        oldSuccessText = $successText.textContent;
                        $successText.textContent = successText;
                    }
                    if ($default && $success) {
                        $default.style.display = "none";
                        $success.style.display = "block";
                    }

                    setTimeout(function () {
                        if ($successText && oldSuccessText)
                            $successText.textContent = oldSuccessText;
                        if ($default && $success) {
                            $success.style.display = "";
                            $default.style.display = "";
                        }
                    }, 800);
                });
            });
        });
    })();
</script>
