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

interface Props {
    className?: string
}

const Events = (props: Props) => {
    const dataDirectus = useStaticQuery(graphql`
        query MyQuery {
            directusWithDatePos: directus {
                events(filter: { date_start: { _gte: "now" } }, limit: 3) {
                    id
                    title
                    organization
                    date_start
                    date_end
                    url
                    oranization_url
                }
            }
            directusWithoutDatePos: directus {
                events(filter: { date_start: { _lt: "now" } }, limit: 1) {
                    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}`}>
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-x-4 gap-y-8">
                <div className="flow-root">
                    <ul className="-mb-8">
                        <li>
                            <div className="relative pb-8">
                                <div className="flex-col">
                                    {events.map((event: any) => {
                                        return (
                                            <div
                                                key={event.id}
                                                className="min-w-0 pt-1.5 flex-1 md:flex justify-between space-x-4 mt-5"
                                            >
                                                <div className="md:flex text-lg whitespace-nowrap">
                                                    <div>
                                                        <span className="h-10 w-10 rounded-full flex items-center justify-center ring-8 ring-white bg-secondary">
                                                            <svg
                                                                xmlns="http://www.w3.org/2000/svg"
                                                                viewBox="0 0 20 20"
                                                                fill="currentColor"
                                                                aria-hidden="true"
                                                                className="h-5 w-5 text-neutral-content"
                                                            >
                                                                <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>
                                                    <div className="mt-2 ml-4">
                                                        <a
                                                            href={event.url}
                                                            className="font-medium hover:text-primary"
                                                        >
                                                            {event.title}
                                                        </a>
                                                        {" - "}
                                                        <a
                                                            href={
                                                                event.oranization_url
                                                            }
                                                            className="hover:text-secondary"
                                                        >
                                                            {event.organization}
                                                        </a>
                                                    </div>
                                                </div>

                                                <div className="md:flex text-sm whitespace-nowrap">
                                                    <div className="mr-4 mt-3">
                                                        <span>
                                                            {event.date_start}
                                                        </span>{" "}
                                                        {" au "}
                                                        <span>
                                                            {event.date_end}
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        )
                                    })}
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    )
}

export default Events