text: /* eslint-disable new-cap */
  import Head from 'next/head';
  import Link from 'next/link';
  import { useRouter } from 'next/router';
  
  import React, { useState, useEffect } from 'react';
  import ReactHtmlParser from 'react-html-parser';
  
  import Navigation from '../components/Navigation';
  import Dropdown from '../components/Dropdown';
  import Button from '../components/Button';
  
  import Country from '../components/Country';
  import getRestrictions from '../queries/getRestrictions';
  
  export const Journey = () => {
      const router = useRouter();
      const {
          query: {
              country = ''
          } = {}
      } = router;
  
      const uppercaseCountry = country.toUpperCase();
  
      const [apiData, setApiData] = useState({});
      useEffect(() => {
          getRestrictions(uppercaseCountry)
              .then((response) => setApiData(response));
      }, [uppercaseCountry]);
  
      const {
          data: {
              summary = '',
              area: {
                  name: areaName = 'Loading...'
              } = {},
              diseaseInfection: { date = 'Loading...' } = {},
              areaAccessRestriction: {
                  declarationDocuments: { text: declarationText, travelDocumentationLink = '', documentRequired = '' } = {},
                  diseaseTesting: { isRequired: isTestRequired = 'Loading...', text: diseaseText = 'Loading...' } = {},
                  entry: { text: entryText = 'Loading...' } = {},
                  quarantineModality: { text: quarantineText = 'Loading...' } = {},
                  mask: { text: maskText = 'Loading...', isRequired: isMaskRequired = 'Loading...' } = {}
              } = {}
          } = {}
      } = apiData;
  
      const formattedDate = new Date(date).toDateString();
  
      const renderDeclarationButton = () => (
          <div className="my-8">
            { ReactHtmlParser(declarationText) }
            <Button
              title="Read Official Regulations"
              type="primary"
              onClick={ () => window.open(travelDocumentationLink, '_blank') }
            />
          </div>
      );
  
      return (
      <div className="bg-grey-light">
        <Head>
          <title>Journey</title>
          <meta name="description" content="A digital solution that helps travelers plan a multi-destination vacation in a post-covid world" />
  
          <link rel="icon" href="/favicon.ico" />
          <link rel="manifest" href="/manifest.json" />
        </Head>
  
        <Navigation />
  
        <div className="container mx-auto px-5">
          <Country
            message={ `Last updated: ${formattedDate}` }
            image={ `https://countryflagsapi.com/png/${areaName}` }
            title={ areaName }
          />
  
          { ReactHtmlParser(summary) }
  
          { documentRequired === 'Yes' ? renderDeclarationButton() : null }
  
          <Dropdown
            title="Face coverings"
            type={ isMaskRequired }
            image="/assets/images/mask.png"
          >
            { ReactHtmlParser(maskText) }
          </Dropdown>
  
          <Dropdown
            title="COVID-19 Test"
            type={ isTestRequired === 'No' ? 'success' : 'mandatory' }
            image="/assets/images/vaccine.png"
          >
            { ReactHtmlParser(diseaseText === 'null' ? 'Testing is not required' : diseaseText) }
          </Dropdown>
  
          <Dropdown
            title="Self-isolation"
            type="success"
            image="/assets/images/distancing.png"
          >
            { ReactHtmlParser(quarantineText) }
          </Dropdown>
  
          <Dropdown
            title="Useful Information"
            type="Please read carefully"
            image="/assets/images/covidpassport.png"
          >
            { ReactHtmlParser(entryText) }
          </Dropdown>
  
          <Button
            title="Save this journey"
            type="primary"
          />
          <Link href="/">
            <a>
              <Button
                title="Plan new journey"
                type="theme"
              />
            </a>
          </Link>
        </div>
  
      </div>
      );
  };
  
  export default Journey;
  