---
import { t } from '@/i18n/store';
import { getLangFromUrl } from '@/i18n/utils';

interface Props {
    text: string,
}

const { text } = Astro.props

const lang = getLangFromUrl(Astro.url);
const placeholder = t('common.copyLink', lang)
const message = t('common.copiedLink', lang)
---

<button data-target={text} data-copy={placeholder} data-copy-message={message}>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path d="M240,88.23a54.43,54.43,0,0,1-16,37L189.25,160a54.27,54.27,0,0,1-38.63,16h-.05A54.63,54.63,0,0,1,96,119.84a8,8,0,0,1,16,.45A38.62,38.62,0,0,0,150.58,160h0a38.39,38.39,0,0,0,27.31-11.31l34.75-34.75a38.63,38.63,0,0,0-54.63-54.63l-11,11A8,8,0,0,1,135.7,59l11-11A54.65,54.65,0,0,1,224,48,54.86,54.86,0,0,1,240,88.23ZM109,185.66l-11,11A38.41,38.41,0,0,1,70.6,208h0a38.63,38.63,0,0,1-27.29-65.94L78,107.31A38.63,38.63,0,0,1,144,135.71a8,8,0,0,0,16,.45A54.86,54.86,0,0,0,144,96a54.65,54.65,0,0,0-77.27,0L32,130.75A54.62,54.62,0,0,0,70.56,224h0a54.28,54.28,0,0,0,38.64-16l11-11A8,8,0,0,0,109,185.66Z"></path></svg>

    <span data-copy-text>
        {placeholder}
    </span>
</button>

<script>
    const copyColor = 'initial'
    const copyColorSuccess = 'var(--green-500)'
    const copyTimeout = 2000

    const dataCopyButtons = document.querySelectorAll<HTMLButtonElement>('button[data-copy]')

    dataCopyButtons.forEach(button => {
        button.addEventListener('click', () => {
            const copyText = button.getAttribute('data-target')
            navigator.clipboard.writeText(copyText!)
            changeCopyText(button)
        })
    })

    function changeCopyText(copyButton: HTMLButtonElement) {
        const copyPlaceholder = copyButton.getAttribute('data-copy')
        const copyPlaceholderSuccess = copyButton.getAttribute('data-copy-message')
        const dataText = copyButton.querySelector<HTMLSpanElement>('[data-copy-text]')
        const svg = copyButton.querySelector<SVGElement>('svg')

        if (!dataText || !svg) return

        dataText.textContent = copyPlaceholderSuccess

        dataText.style.color = copyColorSuccess
        svg.style.fill = copyColorSuccess

        setTimeout(() => {
            dataText.textContent = copyPlaceholder
            dataText.style.color = copyColor
            svg.style.fill = copyColor
        }, copyTimeout)
    }
</script>

<style lang="scss">
button {
    display: inline-flex;
    align-items: center;
    gap: .5ch;
    color: var(--slate-700);
    cursor: pointer;
    text-underline-offset: 2px;
    text-decoration: none;

    &:hover,
    &:focus-visible {
        text-decoration: underline;
    }

    svg {
        width: 1rem;
        height: 1rem;
        fill: var(--slate-700);
    }
}
</style>