import React, {ReactNode} from 'react';
import dayjs from "dayjs";
import QRCode from "react-qr-code";
import logo from "../../../../assets/images/logo-dem-big.png";
import foldEl from "../../../../assets/images/howtofold-el.png";
import foldEn from "../../../../assets/images/howtofold-en.png";
import locale_el from "dayjs/locale/el";
import locale_en from "dayjs/locale/en";
import {Invitation} from "../../../../models/DPass/Invitation";
import './visit-invitation-print.scss'
import Print from "../Print";
import {Trans, useTranslation} from "react-i18next";

type InvitationPrintProps = {
    children?: ReactNode,
    invitation: Invitation
    unprint: () => void
}

const BFF = process.env.REACT_APP_BFF
const qrEndpointBase = BFF + '/public-api/dpass/v1/qr/form?invitation_id='

const InvitationPrint = ({invitation, unprint}: InvitationPrintProps) => {


    const date_locale = invitation.locale === 'en' ? locale_en : locale_el
    const fold = invitation.locale === 'en' ? foldEn : foldEl

    const qrEndpoint = qrEndpointBase + invitation.id.toString()
    const currentYear = new Date().getFullYear();

    const {t} = useTranslation();

    return (
        <Print unprint={unprint}>
            <div id='invitation-print'>
                <table className="qr-print">
                    <tbody>
                    <tr>
                        <td className="top-left">


                            <h2 className="title">{t('DPassPrints.title')}:</h2>


                            <div className="name">
                                <p>
                                    <b>
                                        {invitation.visitor.firstname}
                                        <br/>
                                        {invitation.visitor.lastname}
                                    </b>
                                </p>
                            </div>

                            <div className="code">

                                <p>{t('invitation.code')}:</p>
                                <span className="blue">{invitation.code}</span>
                            </div>

                            <div className="qr-code">
                                <QRCode
                                    size={92}
                                    value={qrEndpoint}/>
                            </div>

                            <div className="logo">
                                <img src={logo} width='76' height='85' alt="Demokritos Logo"/>
                            </div>

                            <div className="bottom-print">
                                <span>&#169; {currentYear} - National Centre for Scientific Research "Demokritos"</span>
                            </div>

                        </td>

                        <td className="top-right">
                            <div className={`fold left ${invitation.locale}`}>{t('DPassPrints.fold_here')}</div>

                            <div className="access">
                                <p>
                                    {t('invitation.building')}: <span
                                    className="blue">{invitation.building_no || '--'}</span>
                                </p>
                                <p>
                                    {t('invitation.room')}: <span
                                    // eslint-disable-next-line eqeqeq
                                    className="blue">{(invitation.locale == 'el' ? invitation.room : invitation.room_en) || '--'}</span>
                                </p>
                                <p>
                                    {t('invitation.institute')}: <span
                                    // eslint-disable-next-line eqeqeq
                                    className="blue">{(invitation.locale == 'el' ? invitation.institute_name : invitation.institute_name_en) || '--'}</span>
                                </p>


                            </div>

                            <div className="visits">
                                {
                                    invitation.visits.slice(0, 3).map((visit, i) =>
                                        <p key={visit.id}>
                                            <span className="index">{i + 1}.</span>
                                            <span
                                                className="date"><b>{dayjs(visit.date).locale(date_locale).format('DD/MM/YYYY')}</b></span>
                                            <span
                                                className="time"><b>{visit.time_from.substring(0, 5)} - {visit.time_to.substring(0, 5)}</b></span>
                                        </p>
                                    )
                                }

                            </div>

                            <div className="visits-message">
                                <h4>
                                    <b>
                                        {t('DPassPrints.total_visits')}:
                                        <span
                                            className="blue"> {invitation.visits.length}</span>
                                    </b>
                                </h4>
                                <p className="hint"> {
                                    invitation.visits.length > 3 && t('DPassPrints.more_visits_message')

                                }
                                </p>

                            </div>


                            <div className={'vehicle_warning'}>
                                <p className={'blue'}>
                                    {
                                        invitation.vehicle_allowed === 0 ?
                                            <Trans i18nKey={"invitation.vehicle_warning_not_allowed"}>
                                                <b></b><b className={'red'}></b>
                                            </Trans>
                                            :
                                            <Trans i18nKey={"invitation.vehicle_warning_allowed"}>
                                                <b></b><b className={'green'}></b>
                                            </Trans>

                                    }

                                </p>
                            </div>


                            <div className="bottom-print">
                                <span>&#169; {currentYear} - National Centre for Scientific Research "Demokritos"</span>
                            </div>


                        </td>
                    </tr>
                    <tr>
                        <td className="bottom-left">

                            <div className="info blue">
                                <p className={'blue'} style={{whiteSpace: 'pre-line'}}>
                                    <Trans i18nKey={"DPassPrints.warning_message"}>
                                        <b>Προσοχή:</b>
                                        Κρατήστε την παρούσα κάρτα
                                        για όσο καιρό είναι έγκυρη
                                        και ανατυπώστε εάν καταστραφεί.
                                    </Trans>
                                </p>
                                <br/>
                                <p className={'blue'} style={{whiteSpace: 'pre-line'}}>
                                    <Trans i18nKey={"DPassPrints.important_message"}>
                                        <b>Σημαντικό:</b>
                                        Εάν η κάρτα δεν ανήκει σε εσάς επικοινωνήστε στο 210 6503541-4
                                    </Trans>
                                </p>

                            </div>


                        </td>

                        <td className="bottom-right">
                            <div className="fold top">{t('DPassPrints.fold_here')}</div>
                            <div className="how-to-print">
                                <h4 className="blue"><b>{t('DPassPrints.how_to_fold')}:</b></h4>
                                <h4 className="blue"><b>{t('DPassPrints.paper_size')}.</b></h4>
                                <img src={fold} width='220' height='258' alt="Demokritos Logo"/>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </Print>
    );
}

export default InvitationPrint;