import React, {useContext, useState} from 'react';
import {LanguageContext} from 'context/languageContext';
import {FooterLink, LanguageProps} from 'src/interfaces';
import {
  FooterContainer,
  FooterTop,
  FooterRow,
  FooterLinksContainer,
  FooterCopyContainer,
  FooterCopy,
  FooterSocialContainer,
  FooterSocialRow,
  FooterAppRow,
  FooterImage,
  FooterIcon,
  FooterBottom,
  FooterBottomRow,
  FooterChatContainer,
  ChatButton,
  ChatIcon,
  ChatText,
  FooterAppItems,
  FooterAppLabel,
} from './styles';
import {NextLink} from '../core';
import { FooterSocialLink } from '../../interfaces/index';
//import TagManager from 'react-gtm-module';

interface FooterProps {
  footer: LanguageProps;
}

export const Footer: React.FC<FooterProps> = ({footer}): JSX.Element => {
  const {language} = useContext(LanguageContext);
  const [footerObj, setFooterObj] = useState(footer);
  if(undefined == footerObj){
    setFooterObj(footer);
  }
  const footerData = footerObj[language];
  const {links, social, app, copy1, copy2} = footerData;
  const chatLink = (language == 'english') ? 'https://helpline-vision.ucsd.edu/Chat' : 'https://helpline-vision.ucsd.edu/Chat/es';
  const chatText = (language == 'english') ? 'Chat' : 'Chatea';


  const clickLink = (menuItemName: String) => {
    if('Contact' !== menuItemName){
      // don't double track Contact link as both CTA and navigation
      /*
      TagManager.dataLayer({
        dataLayer: {
          'event': 'ce_navigationClick',
          'menuType': 'footer',
          'menuItemName': menuItemName
        }
      });
      */
    }
  }

  const openCookieDrawer = () => {
    window.Osano.cm.showDrawer('osano-cm-dom-info-dialog-open');
  }

  return (
    <FooterContainer>
      <FooterTop>
        <FooterRow>
          <FooterLinksContainer>
            {links.map( ({linkUrl, linkText}: FooterLink, idx: number) => {
              if( 'Contact' == linkText) {
                // treat 'Contact' link as CTA
                return (<NextLink clickCategory="call-to-action" clickAction={linkText} clickLabel={linkUrl} href={linkUrl} key={linkText + idx} onClick={() => clickLink(linkText)}>
                  {linkText}
                </NextLink>);
              }

              return (<NextLink href={linkUrl} key={linkText + idx} onClick={() => clickLink(linkText)}>
                {linkText}
              </NextLink>);
            } )}

            <NextLink href="#" onClick={openCookieDrawer}>Cookies</NextLink>
          </FooterLinksContainer>
          <FooterCopyContainer>
            <FooterCopy>{copy1}</FooterCopy>
            <FooterCopy>{copy2}</FooterCopy>
          </FooterCopyContainer>
        </FooterRow>
        <FooterRow>
          <FooterSocialContainer>
            <FooterSocialRow>
              {social.map(({icon, url}: FooterSocialLink) => (
                <NextLink href={url} key={icon.altText} data-click-category="social" data-click-action="link" data-click-label={icon.altText} >
                  <FooterIcon src={icon.sourceUrl} alt={icon.altText} />
                </NextLink>
              ))}
            </FooterSocialRow>
            <FooterAppRow>
              {app.map(({label}: any) => (
                <FooterAppItems key={label}>
                  <FooterAppLabel>{label}</FooterAppLabel>
                  <NextLink href="https://apps.apple.com/app/kick-it-quit-smoking-vaping/id6473648667" data-click-category="call-to-action" data-click-action="App Download" data-click-label="iOS App Download">
                    <FooterImage src="/images/icons/app-store-icon.png" alt="apple store icon" />
                  </NextLink>
                  <NextLink href="https://play.google.com/store/apps/details?id=com.kickitca" data-click-category="call-to-action" data-click-action="App Download" data-click-label="Android App Download">
                    <FooterImage src="/images/icons/google-store-icon.png" alt="google store icon" />
                  </NextLink>
                </FooterAppItems>
              ))}
            </FooterAppRow>
          </FooterSocialContainer>
        </FooterRow>
      </FooterTop>
      <FooterBottom>
        <FooterBottomRow>
          <FooterCopy>{copy1}</FooterCopy>
        </FooterBottomRow>
        <FooterBottomRow>
          <FooterCopy>{copy2}</FooterCopy>
        </FooterBottomRow>
        <FooterChatContainer>
          <ChatButton href={chatLink} target="_blank" data-click-category="call-to-action" data-click-action="Chat" data-click-label="Chat">
            <ChatIcon src="/images/icons/chat-icon.svg" />
            <ChatText>{chatText}</ChatText>
          </ChatButton>
        </FooterChatContainer>
      </FooterBottom>
    </FooterContainer>
  );
};

export default Footer;