/* eslint-disable @next/next/no-img-element */
import Link from 'next/link';
import styles from './Footer.module.scss';
import { Image as Img } from '../../models/common';
import { Footer as FooterI } from '../../models/menu';
import { Link as LinkI } from '../../models/common';
import finLogos from '../../public/imgs/co-logos-blue.svg';
import affinita from '../../public/imgs/logo_affinita.svg';
import useTranslation from 'next-translate/useTranslation';
import NextImage from 'next/legacy/image';

interface Props extends FooterI {
  img: Img;
  menus: LinkI[];
}

const fileUrl = '/eae_ficha_projeto.pdf';

const Footer = (props: Props): JSX.Element => {
  const {
    img,
    menus,
    emailContact,
    phoneContact,
    legalInfoLink,
    copyrightText,
    address,
    socialMedia
  } = props;
  const { t } = useTranslation();

  return (
    <footer className={styles.footer}>
      <div className={styles.container}>
        <div className={styles.image}>
          {img.src && <NextImage src={img.src} width={171} height={68} alt='' />}
        </div>
        <div className={styles.container}>
          <div>
            <div className={styles.menus}>
              {menus?.map((menu, id) => (
                <Link key={id} href={menu.url} legacyBehavior={true}>
                  <a>{menu.label}</a>
                </Link>
              ))}
            </div>
            <div className={styles.containerContactsLegacies}>
              <div className={styles.contacts}>
                <div>{address}</div>
                <div>
                  <div>
                    {emailContact?.url && (
                      <Link href={emailContact?.url} legacyBehavior={true}>
                        <a>{emailContact?.label}</a>
                      </Link>
                    )}
                  </div>
                  <div>
                    {phoneContact?.url && (
                      <>
                        <Link href={phoneContact?.url} legacyBehavior={true}>
                          <a>{phoneContact?.label}</a>
                        </Link>
                        <div className={styles.disclaimer}>(chamada para rede fixa nacional)</div>
                      </>
                    )}
                  </div>
                  <div className={`${styles.socialMedia} ${styles.tablet}`}>
                    {socialMedia?.map((social, id) => (
                      <Link
                        href={social.link.url}
                        key={id}
                        legacyBehavior={true}
                      >
                        <a
                          className={styles[social.link.label]}
                          target={social.link.isExternal ? '_blank' : undefined}
                        >
                          {social.link.label}
                        </a>
                      </Link>
                    ))}
                  </div>
                </div>
              </div>
              <div className={`${styles.socialMedia} ${styles.mobile}`}>
                {socialMedia?.map((social, id) => (
                  <Link href={social.link.url} key={id} legacyBehavior={true}>
                    <a className={styles[social.link.label]}>
                      {social.link.label}
                    </a>
                  </Link>
                ))}
              </div>
              <div
                className={`${styles.coFinanced} ${styles.mobile} ${styles.desktop}`}
              >
                {t('common:footer.co-financed-by')} <br />
                <a
                  href={fileUrl}
                  target='_blank'
                  rel='noopener noreferrer'
                  aria-label='Co Financed Image'
                >
                  <NextImage src={finLogos.src} width={472} height={45} alt='co financed by:' />
                </a>
                <div className={`${styles.affinita} ${styles.mobile}`}>
                  A member of: <br />
                  <NextImage src={affinita.src} width={155} height={32} alt='Affinita' />
                </div>
              </div>
              <div
                className={`${styles.policies} ${styles.mobile} ${styles.desktop}`}
              >
                <div>{copyrightText}</div>
                {legalInfoLink?.url && (
                  <div>
                    <div>
                      <Link href={legalInfoLink?.url} legacyBehavior={true}>
                        <a>{legalInfoLink?.label}</a>
                      </Link>
                    </div>
                  </div>
                )}
              </div>
            </div>
            <div className={`${styles.socialMedia} ${styles.desktop}`}>
              <div>
                {socialMedia?.map((social, id) => (
                  <Link href={social.link.url} key={id} legacyBehavior={true}>
                    <a
                      className={styles[social.link.label]}
                      target={social.link.isExternal ? '_blank' : undefined}
                    >
                      {social.link.label}
                    </a>
                  </Link>
                ))}
              </div>
              <div
                className={`${styles.affinita} ${styles.mobile} ${styles.desktop}`}
              >
                A member of:
                <br />
                <Link href={'https://affinita.com'} legacyBehavior={true}>
                  <a target='_blank'>
                    <NextImage src={affinita.src} width={155} height={32} alt='Affinita' />
                  </a>
                </Link>
              </div>
            </div>
            <div className={styles.playItAgainSam}>
              <button
                aria-label=''
                type='button'
                onClick={() => {
                  if (process.browser)
                    window.scrollTo({ top: 0, behavior: 'smooth' });
                }}
              >
                {t('common:footer.button.play-it-again')}
              </button>
            </div>
          </div>
          <div className={`${styles.coFinanced} ${styles.tablet}`}>
            <div>
              {t('common:footer.co-financed-by')} <br />
              <a
                href={fileUrl}
                target='_blank'
                rel='noopener noreferrer'
                aria-label='Co Financed Image'
              >
                <NextImage src={finLogos.src} width={472} height={45} alt='co financed by:' />
              </a>
            </div>
            <div
              className={`${styles.affinita} ${styles.mobile} ${styles.tablet}`}
            >
              A member of: <br />
              <Link href={'https://affinita.com'} legacyBehavior={true}>
                <a target='_blank'>
                  <NextImage src={affinita.src} width={155} height={32} alt='Affinita' />
                </a>
              </Link>
            </div>
          </div>
          <div className={`${styles.policies} ${styles.tablet}`}>
            <div>{copyrightText}</div>
            {legalInfoLink?.url && (
              <div>
                <div>
                  <Link href={legalInfoLink?.url} legacyBehavior={true}>
                    <a>{legalInfoLink?.label}</a>
                  </Link>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </footer>
  );
};
export default Footer;