Untitled

/*
Licensed Materials - Property of IBM
694906H
(c) Copyright IBM Corp.  2020 All Rights Reserved

US Government Users Restricted Rights - Use, duplication or disclosure restricted
by GSA ADP Schedule Contract with IBM Corp.
*/

import React, { useRef, useEffect } from 'react';
import * as S from './ShareProduct.styles';
import { Share16 } from '@carbon/icons-react';
import WhatsAppIcon from '../../../../../../components/public/assets/images/WhatsAppIcon.svg';
import FacebookIcon from '../../../../../../components/public/assets/images/FacebookIcon.svg';
import CopyToClipboardIcon from '../../../../../../components/public/assets/images/CopyToClipboardIcon.svg';
import { Link } from '@exo/frontend-components-agro';
import { useNotificationContext } from '@exo/frontend-common-notification';
import { ActionType, TagManagerUtils } from '@exo/frontend-utils';
import { useSessionContext } from '@exo/frontend-common-session-context';

export const ShareProduct = () => {
  const popoverRef = useRef<HTMLDivElement>(null);
  const { createNotification } = useNotificationContext();
  const sessionContext = useSessionContext();

  const wppEncodedUrl =
    'https://wa.me/?text=Ol%C3%A1,%20achei%20essa%20oferta%20interessante%20e%20gostaria%20de%20compartilhar!%0A%0A';
  const fbEncodedUrl = encodeURI('https://www.facebook.com/sharer/sharer.php?u=');
  const productEncodedUrl = encodeURI(window.location.href.split('?oferta')[0]);

  useEffect(() => {
    function handleClickOutside(event) {
      if (popoverRef.current && !popoverRef.current.contains(event.target)) {
        popoverRef?.current?.classList?.remove('popoverActive');
      }
    }

    document.addEventListener('mousedown', handleClickOutside);

    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [popoverRef]);

  async function copyTextToClipboard(text) {
    if ('clipboard' in navigator) {
      return navigator.clipboard.writeText(text);
    } else {
      return document.execCommand('copy', true, text);
    }
  }

  return (
    <S.Container>
      <S.Popover>
        <S.TriggerContainer
          ref={popoverRef}
          onClick={() => {
            popoverRef?.current?.classList?.toggle('popoverActive');
          }}
        >
          <div className={'content'}>
            <Link
              title={'Compartilhar no WhatsApp'}
              alt={'Compartilhar no WhatsApp'}
              href={wppEncodedUrl + productEncodedUrl}
              target={'_blank'}
              onClick={() => {
                TagManagerUtils.interact(
                  ActionType.Click,
                  'botao',
                  `compartilhar-no-whatsapp`,
                  'marketplace',
                  TagManagerUtils.getUserStatus(sessionContext),
                  `e-agro${location.pathname}}`,
                  null,
                  { userId: TagManagerUtils.getUserId(sessionContext) }
                );
              }}
            >
              <WhatsAppIcon />
            </Link>
            <Link
              title={'Compartilhar no Facebook'}
              alt={'Compartilhar no Facebook'}
              href={fbEncodedUrl + productEncodedUrl}
              target={'_blank'}
              onClick={() => {
                TagManagerUtils.interact(
                  ActionType.Click,
                  'botao',
                  `compartilhar-no-facebook`,
                  'marketplace',
                  TagManagerUtils.getUserStatus(sessionContext),
                  `e-agro${location.pathname}}`,
                  null,
                  { userId: TagManagerUtils.getUserId(sessionContext) }
                );
              }}
            >
              <FacebookIcon />
            </Link>
            <Link
              title={'Copiar link'}
              alt={'Copiar link'}
              onClick={async () => {
                await copyTextToClipboard(productEncodedUrl);
                createNotification({
                  kind: 'success',
                  title: '',
                  subtitle: 'Link copiado para a área de transferência'
                });
                TagManagerUtils.interact(
                  ActionType.Click,
                  'botao',
                  `copiar-link`,
                  'marketplace',
                  TagManagerUtils.getUserStatus(sessionContext),
                  `e-agro${location.pathname}}`,
                  null,
                  { userId: TagManagerUtils.getUserId(sessionContext) }
                );
              }}
            >
              <CopyToClipboardIcon />
            </Link>
          </div>
          <S.Trigger
            onClick={() => {
              TagManagerUtils.interact(
                ActionType.Click,
                'botao',
                `compartilhar`,
                'marketplace',
                TagManagerUtils.getUserStatus(sessionContext),
                `e-agro${location.pathname}}`,
                null,
                { userId: TagManagerUtils.getUserId(sessionContext) }
              );
            }}
          >
            <Share16 />
            <S.TriggerText>Compartilhar</S.TriggerText>
          </S.Trigger>
        </S.TriggerContainer>
      </S.Popover>
    </S.Container>
  );
};