<?php
$product = $block->getProduct();
$url = $product->getProductUrl();
$encodedUrl = urlencode($url);
$shareText = __('Check that out: %1 #[marketing hash] %2', $product->getName(), $url);
?>
<div class="cs-buybox__sharing">
    <ul class="cs-share">
        <li class="cs-share__item cs-share__item--facebook">
            <a onclick="window.open(this.href, '_blank', 'width=600,height=460'); return false;" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=<?= $encodedUrl ?>[optional campaing identifier]" rel="nofollow noopener" data-rel="popup" title="<?= __('Share on Facebook'); ?>" role="button" aria-label="<?= __('Share on Facebook'); ?>" class="cs-share__link cs-share__link--facebook">
                <?= $this->getLayout()
                         ->createBlock('MageSuite\ThemeHelpers\Block\Icon')
                         ->setIconUrl('images/socials/facebook.svg')
                         ->setCssClass('cs-share__icon cs-share__icon--facebook')
                         ->setAltText(__('Share on facebook'))
                         ->setInlined(true)
                         ->setLazyLoaded(true)
                         ->toHtml();
                ?>
                <span class="cs-visually-hidden"><?= __('Share on Facebook'); ?></span>
            </a>
        </li>
        <li class="cs-share__item cs-share__item--pinterest">
            <a onclick="window.open(this.href, '_blank', 'width=600,height=460'); return false;" target="_blank" href="https://www.pinterest.com/pin/create/link/?url=<?= $encodedUrl ?>[optional campaign identifier]&amp;media=<?= [ get encoded image url ]?>&amp;description=<?= urlencode($shareText) ?>[optional campaing identifier]" data-rel="popup" title="<?= __('Pin at Pinterest'); ?>" role="button" aria-label="<?= __('Pin at Pinterest'); ?>" rel="nofollow noopener" class="cs-share__link cs-share__link--pinterest">
                [icon (similarly as above)]
                [visually hidden text for screen readers (similarly as above)]
            </a>
        </li>
        <li class="cs-share__item cs-share__item--whatsapp">
            <a onclick="window.open(this.href, '_blank', 'width=600,height=460'); return false;" target="_blank" href="whatsapp://send?text=<?= urlencode($shareText) ?>[optional campaing identifier]" title="<?= __('Share with Whatsapp'); ?>" rel="nofollow noopener" role="button" aria-label="<?= __('Share with Whatsapp'); ?>" class="cs-share__link cs-share__link--whatsapp">
                [icon (similarly as above)]
                [visually hidden text for screen readers (similarly as above)]
            </a>
        </li>
        <li class="cs-share__item cs-share__item--copy">
            <a href="#" title="<?= __('Copy to clipboard'); ?>" role="button" aria-label="<?= __('Copy to clipboard'); ?>" class="cs-share__link cs-share__link--copy">
                [icon (similarly as above)]
                [visually hidden text for screen readers (similarly as above)]
                <input type="text" class="cs-visually-hidden copytoclipboard" aria-label="<?= __('Copy to clipboard'); ?>" value="<?= $shareText ?>?utm_source=copy&utm_medium=social&utm_campaign=user-share-copy">
            </a>
            <span class="cs-share__feedback-tooltip"><?= __('Product url has beed copied to your clipboard.'); ?></span>
        </li>
    </ul>
</div>

<referenceContainer name="product.info.main">
    <block class="Magento\Catalog\Block\Product\View" name="product.info.main.sharing" template="Magento_Catalog::product/view/sharing.phtml" after="-" />
</referenceContainer>

export default class Share {
    protected _link: HTMLLinkElement;
    protected _copySource: HTMLInputElement;
    protected _sharingText: String;
    protected _feedback: HTMLSpanElement;
    
    public constructor() {
        this._link = document.querySelector('.cs-share__link--copy');
        this._copySource = document.querySelector('#copytoclipboard');
        this._feedback = document.querySelector('.cs-share__feedback-tooltip');

        this._setEvents();
    }

    protected _copyToClipboard(): void {
        this._copySource.select();
        document.execCommand('copy');
        
        if (this._feedback) {
            this._feedback.classList.add('cs-share__feedback-tooltip--active');
        }
    }
    
    protected _setEvents(): void {
        this._link.addEventListener('click', (e: MouseEvent): void => {
            e.preventDefault();

            if (this._copySource) {
                this._copyToClipboard();
            }
        });

        if (this._feedback) {
            this._feedback.addEventListener('animationend', (): void => {
                this._feedback.classList.remove('cs-share__feedback-tooltip--active');
            });
        }
    }
}