import React, { Component } from 'react';
import { parseCookies, setCookie } from 'nookies';

import { Button } from './Button';
import { CookieConsent as CookieConsentStyle } from '../../styles/components/shared/CookieConsent.style';
import Cookie from '../../assets/img/icons/cookie.svg';
import { PrismicLink } from 'easy-prismic-react';

interface Props {
  privacyLink: PrismicLink;
}

interface State {
  isOpen: boolean;
}

const COOKIE_CONSENT_NAME = 'cookie-consent';

export class CookieConsent extends Component<Props> {
  state: State = {
    isOpen: false
  };

  static saveCookieConsent(): void {
    if (parseCookies(null)[COOKIE_CONSENT_NAME]) {
      return;
    }

    setCookie(null, COOKIE_CONSENT_NAME, 'true', {
      maxAge: 7 * 24 * 60 * 60,
      domain: process.env.COOKIE_DOMAIN,
      path: '/'
    });
  }

  componentDidMount(): void {
    if (parseCookies(null)[COOKIE_CONSENT_NAME]) {
      this.setState({ isOpen: false });
    } else {
      this.setState({ isOpen: true });
    }
  }

  accept = (): void => {
    this.setState({ isOpen: false });
    CookieConsent.saveCookieConsent();
  };

  render(): React.ReactElement {
    const { privacyLink } = this.props;
    return (
      <CookieConsentStyle isOpen={this.state.isOpen}>
        <button type="button" className="icon-close" onClick={this.accept} />
        <h3>
          <Cookie className="emoji" /> Easyblue utilise des cookies !
        </h3>
        <p>
          Notre objectif ? Vous simplifier l’assurance avec un service de qualité. Les cookies nous
          permettent d’améliorer votre expérience et vous proposer un parcours adapté à votre
          profil. En poursuivant votre navigation, vous acceptez l’utilisation de ces cookies.{' '}
          <a
            target="_blank"
            rel="noopener noreferrer"
            href={privacyLink?.url || '/'}
          >
            En savoir plus et paramétrer mes cookies
          </a>
        </p>
        <Button extraSmall type="button" onClick={this.accept}>Fermer</Button>
      </CookieConsentStyle>
    );
  }
}