import React, { useState } from 'react';
import Lottie from 'react-lottie';

import { FooterContainer, FooterBlock, SocialNetwork } from '../../styles/components/shared/Footer.style';
import Easyblue from '../../assets/img/logo.svg';
import Facebook from '../../assets/img/icons/facebook.svg';
import Instagram from '../../assets/img/icons/instagram.svg';
import Linkedin from '../../assets/img/icons/linkedin.svg';
import { FooterData } from '../../typings/entities';
import PrismicLink from '../PrismicLink';
import { Flex } from '../../styles/components/shared/Flex.style';
import checkAnimation from '../../assets/lottie/check.json';
import NewsletterForm from './NewsletterForm';

export const Footer: React.FC<FooterData> = ({ footer_about, footer_cgu_link, footer_legal_link, footer_privacy_link, footer_solutions }) => {
  const [sendSuccess, setSendSuccess] = useState<boolean>(false);

  return (
    <FooterContainer>
      <div>
        <FooterBlock>
          <Easyblue className="logo" />
          <p>
            <PrismicLink link={footer_legal_link}>Mentions Légales</PrismicLink>
            <PrismicLink link={footer_cgu_link}>CGU</PrismicLink>
            <PrismicLink link={footer_privacy_link}>Charte de confidentialité</PrismicLink>
          </p>
          <p className="color-grey">
            ©{new Date().getFullYear()} Easyblue. Tous droits réservés.
          </p>
          <SocialNetwork>
            <a
              target="_blank"
              rel="noopener noreferrer"
              aria-label="facebook"
              href="https://www.facebook.com/easyblue.io/"
            >
              <Facebook />
            </a>
            <a
              target="_blank"
              rel="noopener noreferrer"
              aria-label="Instagram"
              href="https://www.instagram.com/easyblue.io/"
            >
              <Instagram />
            </a>
            <a
              target="_blank"
              rel="noopener noreferrer"
              aria-label="Linkedin"
              href="https://www.linkedin.com/company/easyblue-io/"
            >
              <Linkedin />
            </a>
          </SocialNetwork>
        </FooterBlock>
        <div>
          <Flex>
            <FooterBlock>
              <h5>Nos solutions d'assurance</h5>
              <ul>
                {footer_solutions && footer_solutions.map((solution, index: number) => (
                  <li key={`solution-${index}`}>
                    <PrismicLink link={solution.solution_link}>{solution.solution_title}</PrismicLink>
                  </li>
                ))}
              </ul>
            </FooterBlock>
            <FooterBlock>
              <h5>Parcourir le site</h5>
              <ul>
                {footer_about && footer_about.map((about, index: number) => (
                  <li key={`solution-${index}`}>
                    <PrismicLink link={about.about_link}>{about.about_title}</PrismicLink>
                  </li>
                ))}
              </ul>
            </FooterBlock>
          </Flex>
          <FooterBlock>
            <h5>Newsletter Easyblue</h5>
            {sendSuccess ? <div className="newsletter-success">
              <Lottie
                height={60}
                width={60}
                options={{
                  loop: false,
                  animationData: checkAnimation
                }} />
              <p>
                Vous êtes désormais abonné(e) à la newsletter Easyblue
              </p>
            </div> : <>
              <NewsletterForm onSubmit={() => setSendSuccess(true)} />
              <p className="color-grey">
                <strong>En cliquant sur « Je m’abonne »</strong>, j’accepte de recevoir les nouveautés et conseils de la part d'Easyblue.
              </p>
            </>}
          </FooterBlock>
        </div>
      </div>
    </FooterContainer>
  );
};

export default Footer;