import React, {useEffect, useState} from 'react';
import {getPdfs} from "../../../../API/dpass";
import DPassInvitationVisitInfo from '../DPassInvitationVisitInfo/DPassInvitationVisitInfo';
import DPassInvitationAcceptLinkBox from './DPassInvitationAcceptLinkBox/DPassInvitationAcceptLinkBox';
import {Invitation} from '../../../../models/DPass/Invitation';
import {useTranslation} from 'react-i18next';
import pdf from "../../../../assets/images/pdf-download.svg";
import googleMaps from "../../../../assets/images/google-maps.svg";
import printer from "../../../../assets/images/print-blue.svg";
import './DPassInvitationAcceptMessage.scss';
import InvitationPrint from "../../../UI/Prints/Visit_InvitationPrint/InvitationPrint";


type DPassInvitationAcceptMessageProps = {
    invitationData: Invitation,
    onCancelVisits: () => void;
}

const DPassInvitationAcceptMessage = ({invitationData, onCancelVisits}: DPassInvitationAcceptMessageProps) => {
    const [print, setPrint] = useState<Invitation | null>(null);
    const [safetyPdf, setSafetyPdf] = useState<any>(null);
    /* eslint-disable @typescript-eslint/no-unused-vars */
    const {t, i18n} = useTranslation();

    const fetchPdfs = async () => {

        try {
            const res = await getPdfs(invitationData.locale);
            setSafetyPdf(res.data.instructions);
        }
        catch(error) {
        }

    }

    useEffect(() => {
        fetchPdfs();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])
    return (
        <div className='accept-message'>
            {
                print && <InvitationPrint
                    invitation={print}
                    unprint={() => setPrint(null)}
                />
            }

            <div className='accept-message--title-container col-lg-8'>
                <h2>{t('DPASS_accept_message.accept_message_title')}</h2>

                <p>
                    {
                        <>
                            {t('DPASS_accept_message.accept_message_content1')}
                            <b>{invitationData.code}</b>.
                            {t('DPASS_accept_message.accept_message_content2a')}
                            <b>{t('DPASS_accept_message.accept_message_content2b')}</b>
                            {t('DPASS_accept_message.accept_message_content2c')}
                            <b>{invitationData.visitor.personal_id}</b>.<br/>
                            {t('DPASS_accept_message.accept_message_content2d')}
                        </>
                    }
                </p>
            </div>

            <DPassInvitationVisitInfo invitation = {invitationData}>
                <p className='visit-info-container--invitation-full-id'>{t('DPASS_accept_message.invitation_code')}{invitationData.code}</p>
                <div className='visit-info-container--link-boxes-container'>
                    <DPassInvitationAcceptLinkBox image={pdf} imageClass={'pdf'} url={safetyPdf}
                                                  urlText={t('DPASS_accept_message.pdf_url_text')}/>
                    <DPassInvitationAcceptLinkBox image={googleMaps} imageClass={'google-maps'}
                                                  url={'https://goo.gl/maps/WH8VFanCwenw3V7S6'}
                                                  urlText={t('DPASS_accept_message.googlemaps_url_text')}/>
                    <DPassInvitationAcceptLinkBox image={printer} imageClass={'print'} urlText={t('DPASS_accept_message.print_url_text')}
                                                  onClick={() => {
                                                      setPrint(invitationData)
                                                  }}/>
                </div>
            </DPassInvitationVisitInfo>

               <p className='accept-message--cancel-link-container'> {t('DPASS_accept_message.accept_message_content3')}
                   {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
                   <a onClick={onCancelVisits}>{t('DPASS_accept_message.accept_message_content3link')}</a>.
               </p>
        </div>
    )
}

export default DPassInvitationAcceptMessage;