import React, { FC, useEffect } from 'react';
import { BlockedEmbedMessage } from './BlockedEmbedMessage';
import { checkVendorConsentAsync } from './helpers/vendorConsent';
import { eventStatus } from './constants';
import { TcData, VendorName } from './types';
import { useSocialEmbedsContext } from '../../contexts/SocialEmbedsProvider';
import { Vendor } from './SocialVendor';

declare global {
  interface Window {
    __tcfapi?: (
      command: string,
      version: number,
      callback: (data: TcData, success: boolean) => void,
      listenerId?: number
    ) => void;
    twttr?: {
      widgets: {
        load: (element?: HTMLElement) => void;
      };
    };
    instgrm?: {
      Embeds?: {
        process: () => void;
      };
    };
  }
}

export type SocialMediaEmbedProps = {
  element?: any;
  url: string;
  vendorName: VendorName;
  id: string;
};

export const SocialMediaEmbed: FC<SocialMediaEmbedProps> = ({
  id,
  url,
  vendorName
}) => {
  const {
    setIsSocialEmbedAllowed,
    isAllowedOnce,
    isSocialEmbedAllowed
  } = useSocialEmbedsContext();

  // Check consent on mount
  useEffect(
    () => {
      checkVendorConsentAsync(vendorName, setIsSocialEmbedAllowed);
    },
    [vendorName, setIsSocialEmbedAllowed]
  );

  // Listen for consent changes
  useEffect(
    () => {
      if (window.__tcfapi) {
        window.__tcfapi('addEventListener', 2, (tcData, success) => {
          if (
            success &&
            (tcData.eventStatus === eventStatus.tcLoaded ||
              tcData.eventStatus === eventStatus.userActionComplete)
          ) {
            checkVendorConsentAsync(vendorName, setIsSocialEmbedAllowed);
          }
        });
      }
    },
    [vendorName, setIsSocialEmbedAllowed]
  );

  return isSocialEmbedAllowed[vendorName] || isAllowedOnce[vendorName] ? (
    <div
      id={id}
      key={
        vendorName === 'facebook'
          ? `facebook-${isSocialEmbedAllowed.facebook}-${
              isAllowedOnce.facebook
            }`
          : id
      }
    >
      <Vendor vendorName={vendorName} url={url} />
    </div>
  ) : (
    <BlockedEmbedMessage vendorName={vendorName} />
  );
};