component.tsx

import React from "react"

import Map from "../core/Map"
import News from "../News"
import Stats from "../Stats"
import Hero from "../Hero"
import Image from "../core/Image"

import { DIRECTUS_ASSETS_URL } from "../../constant"

interface IAction {
    actions_id: {
        name: string
        url: string
        style: string
    }
}

interface IService {
    services_id: {
        name: string
        url: string
        description: string
        image: {
            id: string
        }
    }
}

interface Iimage {
    directus_files_id: {
        id: string
    }
}

interface IComponent {
    type: string
    actions: IAction[] | []
    mapdid: string
    title: string
    subtitle: string
    content: string
    url_dataviz: string
    url_map: string
    layout: string
    length: number
    size: string
    services: IService[] | []
    images: Iimage[] | []
}

const getActions = (actionsProps: IAction[] | []) => {
    if (!actionsProps.length) return undefined

    return actionsProps.map((action_id) => {
        let action = action_id.actions_id
        return {
            ...action,
            classname: action.style,
        }
    })
}

const getServices = (servicesProps: IService[] | []) => {
    if (!servicesProps.length) return undefined

    return servicesProps.map((services_id) => {
        let service = services_id.services_id
        return {
            ...service,
            image: service.image?.id ? getUrlImage(service.image.id) : "",
        }
    })
}

const getImages = (imagesProps: Iimage[] | []) => {
    if (!imagesProps.length) return undefined

    return imagesProps.map((images) => {
        return getUrlImage(images.directus_files_id.id)
    })
}

const getUrlImage = (id: string) => {
    return `${DIRECTUS_ASSETS_URL}${id}`
}

const Component = (props: IComponent) => {
    const {
        type,
        actions: actionsProps = [],
        services: servicesProps = [],
        images: imagesProps = [],
        mapdid,
        ...restProps
    } = props

    const actions = getActions(actionsProps)
    const services = getServices(servicesProps)
    const images = getImages(imagesProps)

    switch (type) {
        case "news":
            let newsaction = actions?.length ? actions[0] : undefined
            return (
                <div>
                    <News {...restProps} action={newsaction} />
                </div>
            )
        case "maps":
            return <div>Liste des cartes</div>
        case "map":
            if (!mapdid) return <div>Map</div>

            return (
                <div className="h-full w-full min-h-[500px]">
                    <Map {...restProps} mapid={parseInt(mapdid)} />
                </div>
            )
        case "data":
            return <div>Liste des données</div>
        case "stats":
            return <Stats {...restProps} />
        case "hero":
            let heroaction = actions?.length
                ? actions[0]
                : { title: "", to: "" }

            return (
                <Hero
                    services={services!}
                    {...restProps}
                    action={heroaction!}
                />
            )
        case "text":
            return <div>Texte</div>
        case "image":
            let img = images?.length ? images[0] : undefined

            return (
                <>
                    <Image image={img} />
                </>
            )
        case "mapgl":
            return <div>Carte Maplibre</div>
        case "geoportal":
            return <div>Cartes, Tableaux de bord, Geostories</div>
        case "dataviz":
            return <div>Data visualisation</div>
        case "events":
            return <div>Liste des événements</div>
    }

    return <div></div>
}

export default Component