import React from "react"
import { graphql, useStaticQuery } from "gatsby"

interface Props {
    className?: string
}

const Events = (props: Props) => {
    const dataDirectus = useStaticQuery(graphql`
        query getEvents {
            directusWithDatePos: directus {
                events(
                    filter: {
                        date_start: { _gte: "now" }
                        status: { _eq: "published" }
                    }
                    limit: 3
                    sort: ["pinned"]
                ) {
                    id
                    title
                    organization
                    date_start
                    date_end
                    url
                    oranization_url
                }
            }
            directusWithoutDatePos: directus {
                events(
                    filter: {
                        date_start: { _lt: "now" }
                        status: { _eq: "published" }
                    }
                    limit: 3
                    sort: ["pinned"]
                ) {
                    id
                    title
                    organization
                    date_start
                    date_end
                    url
                    oranization_url
                }
            }
        }
    `)

    const { className = "" } = props
    let events
    if (dataDirectus.directusWithDatePos.events.length > 0) {
        events = dataDirectus.directusWithDatePos.events
    } else {
        events = dataDirectus.directusWithoutDatePos.events
    }

    return (
        <div className={`${className}`}>
            <ul className="mb-3">
                <li>
                    {events.map((event: any) => {
                        return (
                            <div
                                key={event.id}
                                className="mt-4 justify-between space-x-4 md:flex"
                            >
                                <div className="whitespace-nowrap text-lg md:flex">
                                    <span className="bg-secondary flex h-10 w-10 items-center justify-center rounded-full ring-8 ring-white">
                                        <svg
                                            xmlns="http://www.w3.org/2000/svg"
                                            viewBox="0 0 20 20"
                                            fill="currentColor"
                                            aria-hidden="true"
                                            className="text-neutral-content h-5 w-5"
                                        >
                                            <path
                                                fillRule="evenodd"
                                                d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
                                                clipRule="evenodd"
                                            ></path>
                                        </svg>
                                    </span>
                                    <div className="ml-4 mt-2">
                                        <a
                                            href={event.url}
                                            className="hover:text-primary font-medium"
                                        >
                                            {event.title}
                                        </a>
                                        {" - "}
                                        <a
                                            href={event.oranization_url}
                                            className="hover:text-secondary"
                                        >
                                            {event.organization}
                                        </a>
                                    </div>
                                </div>

                                <div className="mt-3 text-sm">
                                    <span>{event.date_start}</span> {" au "}
                                    <span>{event.date_end}</span>
                                </div>
                            </div>
                        )
                    })}
                </li>
            </ul>
        </div>
    )
}

export default Events