import type { StaticImageData } from "next/image";

import { faBuildings, faCalendar } from "@awesome.me/kit-3dc4522338/icons/classic/solid";
import { cn } from "@/utilities/ui";
import React from "react";
import RichText from "@/components/RichText";

import type { ProjectDisplayBlock as ProjectDisplayBlockProps } from "@/payload-types";

import { Media } from "../../components/Media";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

type Props = ProjectDisplayBlockProps & {
  breakout?: boolean
  captionClassName?: string
  className?: string
  enableGutter?: boolean
  imgClassName?: string
  staticImage?: StaticImageData
  disableInnerContainer?: boolean
}

export const ProjectDisplayBlock: React.FC<Props> = (props) => {
  const {
    captionClassName,
    className,
    enableGutter = true,
    imgClassName,
    media,
    staticImage,
    disableInnerContainer,
  } = props;

  let caption;
  if (media && typeof media === "object") caption = media.caption;

  return (
    <div
      className={cn(
        "flex flex-row gap-5 relative",
        {
          container: enableGutter,
        },
        className,
      )}
    >
      <div className="flex flex-col gap-2 min-w-2/5 max-w-2/5 sticky top-2 h-fit">{(media || staticImage) && (
        <Media
          imgClassName={cn("border border-border rounded-xl shadow-sm", imgClassName)}
          resource={media}
          src={staticImage}
        />
      )}
        {caption && (
          <div
            className={cn(
              "mt-2",
              {
                container: !disableInnerContainer,
              },
              captionClassName,
            )}
          >
            <RichText data={caption}
              enableGutter={false}
              className="text-sm opacity-50 hover:opacity-100 transition-opacity"/>
          </div>
        )}
      </div>
      <section className="prose">
        {props.projectName && (
          <header className="not-prose">
            <h3 className="prose-2xl font-bold">{props.projectName}</h3>
            <div className="opacity-50 flex flex-row gap-1 items-start">
              <FontAwesomeIcon icon={faBuildings} width="12" className="mt-0.5"/>
              <p className="text-xs flex-row gap-1">
                {props.projectCompany}
                &nbsp;&mdash;&nbsp;
                {
                  props.startDate && (
                    <>
                      {props.endDate ? "From " : "Released "}
                      <b>{new Date(props.startDate).toLocaleDateString("en-US", { dateStyle: "long" })}</b>
                      {props.endDate && (
                        <>
                          {" to "}
                          <b>{new Date(props.endDate).toLocaleDateString("en-US", { dateStyle: "long" })}</b>
                        </>
                      )}
                    </>
                  )
                }
              </p></div>
          </header>
        )}
        {props.projectDescription &&
          <RichText data={props.projectDescription} enableGutter={false} className="mx-0 mt-2"/>}
      </section>
    </div>
  );
};
