import React from 'react';
import {Trans, useTranslation} from "react-i18next";
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import {Invitation} from '../../../../models/DPass/Invitation';
import "./DPassInvitationVisitInfo.scss";


dayjs.extend(customParseFormat)

type DPassInvitationVisitInfoProps = {
    invitation: Invitation,
    children?: React.ReactNode
}


const DPassInvitationVisitInfo = ({
                                      invitation,
                                      children
                                  }: DPassInvitationVisitInfoProps) => {

    const {t, i18n} = useTranslation()
    const sender = invitation.locale == 'en' ? invitation.principal_signature_en : invitation.principal_signature;
    const institute = invitation.locale == 'en' ? invitation.institute_name_en : invitation.institute_name_en;
    const room = invitation.locale == 'en' ? invitation.room_en : invitation.room;
    const building = invitation.locale == 'en' ? invitation.building_name_en : invitation.building_name;
    const roomLength = room.length;
    const buildingLength = building.length
    return (
        <div className='col-lg-6 visit-info-container'>

            <p className='visit-info-container--subject'>
                {t('invitation.subject')}:
                <span> {invitation.title || <Trans i18nKey={'invitation.default_title'}> <b>ΕΚΕΦΕ "Δ"</b></Trans>}</span>
            </p>

            <p className='visit-info-container--sender'>{t('invitation.sender')}: <span>{sender}</span></p>
            <div className='visit-info-container--time-container'>
                <div className='visit-info-container--time-container-titles'>
                    <p>{t('invitation.date')}</p>
                    <p>{t('invitation.time')}</p>
                </div>
                {

                    invitation.visits && invitation.visits
                        .filter(visit => visit.status_id < 3)
                        .map((visit, index) => {
                        return (
                            <div key={index} className='visit-info-container--time-container-visit'>
                                <p className='date'>{dayjs(visit.date, 'YYYY-MM-DD').format('DD/MM/YYYY')}</p>
                                <p className='time'>{dayjs(visit.time_from, 'HH:mm:ss').format('HH:mm')}</p>
                            </div>
                        )
                    })
                }
            </div>
            <div className='visit-info-container--location'>
                <p className={roomLength > 12 ? 'visit-info-container--location-title mb-3' :
                building.length > 12 ? 'visit-info-container--location-title mb-3' :
                (roomLength > 12 && buildingLength > 12) ? 'visit-info-container--location-title mb-3' :
                 'visit-info-container--location-title'}>{t('invitation.place')}:</p>
                <div className={roomLength > 12 ? 'd-flex flex-column align-items-start visit-info-container--location-info' :
                buildingLength > 12 ? 'd-flex flex-column align-items-start visit-info-container--location-info' :
                (roomLength > 12 && buildingLength > 12) ? 'd-flex flex-column align-items-start visit-info-container--location-info':
                'visit-info-container--location-info'}>
                    {
                        invitation.building_no != '' &&
                        <p>{t('invitation.building')}: {invitation.locale === 'el' ? <span>{invitation.building_name}</span> : <span>{invitation.building_name_en}</span>}</p>
                    }
                    {
                        room != '' &&
                        <p>{t('invitation.room')}: <span>{room}</span></p>
                    }
                    {
                        institute != ''
                            ?
                            <p>{t('invitation.institute')}: <span>{institute}</span></p>
                            :
                            <p>{t('invitation.institute')}: <span>-</span></p>
                    }
                </div>
            </div>
            {children}
        </div>
    )
}

export default DPassInvitationVisitInfo;