import { MainLayout } from "@/layout/MainLayout/MainLayout";
import Link from "next/link";
import { ConditionalNull, ConditionalParent } from "@/components/utility/Conditional";

export default async function Home() {
  const o = await fetch("https://cdn.abtmtr.link/site_content/organizations.json", { next: { revalidate: 60 } }).then(x=>x.json()).catch(_ => null);
  const organizations: {
    name: string,
    url: string,
    main: {
      title?: string,
      email?: string,
      url?: string,
    },
    involvement: {
      description: string,
      supervisor?: string,
      url?: string,
      start?: string,
      date?: string,
      end?: string
    }[]
  }[] = o.reverse();
  return (
    <MainLayout currentPage="/orgs/" title="Organizations">
      <img className="headerImage" src="/headers/orgs.png" alt="ORGANIZATIONS"></img>
      <p>Organizations I've contributed to, corporations/companies I've done work for, or just general groups I'm a part of.</p>
      <p>All of it's listed here, as well as what I've done.</p>
      {organizations.map((organization) => (<div style={{margin: "2em 0"}}>
        <h2><a target="_blank" href={organization.url}>{organization.name}</a></h2>
        <p>
        <ConditionalNull condition={organization.main.title != null}>
          <ConditionalParent condition={organization.main.url != null} parent={x => 
            <a target="_blank" href={organization.main.url}>{x}</a>
          }>
            {organization.main.title}
          </ConditionalParent>
        </ConditionalNull>
        <ConditionalNull condition={organization.main.title != null && organization.main.email != null}>
          {" - "}
        </ConditionalNull>
        <ConditionalNull condition={organization.main.email != null}>
          <a href={`mailto:${organization.main.email}`}>{organization.main.email}</a>
        </ConditionalNull>
        </p>
        {organization.involvement.reverse().map((involvement) => (<>
          <blockquote>
            <p>
              <ConditionalParent condition={involvement.url != null} parent={x => 
                <a target="_blank" href={involvement.url}>{x}</a>
              }>
                {involvement.description}
              </ConditionalParent>
            </p>
            <p>
            <ConditionalNull condition={involvement.supervisor != null}>
              <small>w/ {involvement.supervisor}</small>
            </ConditionalNull>
            <ConditionalNull condition={involvement.supervisor != null && (involvement.start || involvement.date) != null}>
              <small>{" - "}</small>
            </ConditionalNull>
            <ConditionalNull condition={(involvement.start || involvement.date) != null}>
              <small>{involvement.start || involvement.date}</small>
            </ConditionalNull>
            <ConditionalNull condition={involvement.end != null}>
              {" - "}<small>{involvement.end}</small>
            </ConditionalNull>
            </p>
          </blockquote>
        </>))}
      </div>))}
    </MainLayout>
  )
}