import MY_CONSTANTS from '@/lib/constants-standards.js'
import { ContactInformation } from '@/components/it-standards/ContactInformation'
import { ChildResource, LinkItem } from 'types/content'
import Link from 'next/link'

type Contact = {
    name: string
    link: string
    mail: string
    phone: string
    contactform: string
}

type InfoboxOptions = {
    productOwner: Contact
    developer: Contact
    contact: Contact
    supportInfo: LinkItem[]
    artefacts: LinkItem[]
    combinedStandards: ChildResource[]
    slugMaster: string
    currentSlug: string
    lastUpdate: string
}

//  Converts an ISO date into long German date format
function convertIsoDateToLongDate(theDate: string) {
    const monthNames = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember']

    // Check format
    const regexp = /\d{4}-[01]\d-[0-3]\d/
    if (!regexp.test(theDate)) {
        return '#INVALID'
    }

    // Evaluate string content, e.-g. 2023-09-15
    const year = theDate.substring(0, 4)
    const month = parseInt(theDate.substring(5, 7))
    const dayInMonth = parseInt(theDate.substring(8))

    return dayInMonth + '. ' + monthNames[month - 1] + ' ' + year
}

function getArtefactName(artefact: LinkItem) {
    const found = MY_CONSTANTS.ARTEFACTS.filter((item) => item.id === artefact.name)[0]
    return (found === undefined ? artefact.name : found.text)
}

export function InfoBoxes({
    productOwner,
    developer,
    contact,
    supportInfo,
    artefacts,
    combinedStandards,
    slugMaster,
    currentSlug,
    lastUpdate,
}: InfoboxOptions) {
    return (
        <div className= "infoboxes" >
            {/* Dummy to ensure Tailwind classes are imported */}
            <div className="hidden w-20 bg-red-100 bg-yellow-100 bg-slate-100">
                &nbsp;
            </div>

            {/* CONTACT INFORMATION */}
            <ContactInformation
                productOwner = { productOwner }
                developer = { developer }
                contact = { contact }
            />

            {/* SUPPORT LINKS */}
            {supportInfo.length > 0 && supportInfo[0].name != '' && (
                <div className="w-80 border-2 mb-4 rounded-md">
                    <div className={`${MY_CONSTANTS.BG_COLORS.DEFAULT} p-1 font-bold text-gray-900`}>Support</div>
                    <div className="text-sm p-1">
                        {
                            (supportInfo.map((myItem: LinkItem, key) => {
                                return (
                                    <div className="flex" key={`${key}`}>
                                        { (myItem.url !== ''
                                            ? <div className={'leading-7  text-gray-900 ' + `${myItem.name}`}>
                                                <Link href={myItem.url} passHref legacyBehavior>
                                                    <a target="_blank">{myItem.name}</a>
                                                </Link>
                                            </div>
                                            : null
                                        )}
                                    </div>
                                )
                            }))
                        }
                    </div>
                </div>
            )}

            {/* ARTEFACTS */}
            {artefacts.length > 0 && artefacts[0].name != '' && (
                <div className="w-80 border-2 mb-4 rounded-md">
                    <div className={`${MY_CONSTANTS.BG_COLORS.DEFAULT} p-1 font-bold text-gray-900`}>Artefakte</div>
                    <div className="text-sm p-1">
                        {
                            (artefacts.map((myItem: LinkItem, key) => {
                                return (
                                    <div className="flex" key={`${key}`}>
                                        <div className={'leading-7'}>
                                            { myItem.url === 'n.v.'
                                                ? getArtefactName(myItem) + ' (n.v.)'
                                                : <Link href={myItem.url} passHref legacyBehavior>
                                                    <a target="_blank">{
                                                        getArtefactName(myItem)
                                                    }</a>
                                                </Link>
                                            }
                                        </div>
                                    </div>
                                )
                            }))
                        }
                    </div>
                </div>
            )}

            {/* COMBINED STANDARDS */}
            {combinedStandards.length > 0 && combinedStandards[0].name != '' && (
                <div className="w-80 border-2 mb-4 rounded-md">
                    <div className={`${MY_CONSTANTS.BG_COLORS.COMBINED_STANDARDS} p-1 font-bold text-gray-900`}>Verbundene IT-Standards</div>
                    <div className="text-sm p-1">
                        {
                            (combinedStandards.filter((item) => item.slug != currentSlug))
                                .map((myItem: ChildResource, key) => {
                                    return (
                                        <div className="flex" key={`${key}`}>
                                            {myItem.slug == slugMaster
                                                ? <div className={'leading-7 ' + 'font-bold ' + `${myItem.name}`}>
                                                    <Link href={'/standards/' + myItem.slug} passHref>
                                                        {myItem.name}
                                                    </Link>
                                                </div>
                                                : <div className={'leading-7 ' + `${myItem.name}`}>
                                                    <Link href={'/standards/' + myItem.slug} passHref>
                                                        {myItem.name}
                                                    </Link>
                                                </div>
                                            }
                                        </div>
                                    )
                                })
                        }
                    </div>
                </div>
            )}

            {/* LAST UPDATE */}
            {lastUpdate && (
                <div className="w-80 border-2 mb-4 rounded-md">
                    <div className={`${MY_CONSTANTS.BG_COLORS.DEFAULT} p-1 font-bold text-gray-900`}>Letzte Aktualisierung</div>
                    <div className="text-sm p-1 text-gray-900">
                        <div className="flex">
                            <div className={`${MY_CONSTANTS.INFOBOX_1ST_COLUMN_WIDTH} font-semibold`}>Datum</div>
                            <div>{convertIsoDateToLongDate(lastUpdate)}</div>
                        </div>
                    </div>
                </div>
            )}
        </div>
    )
}