import * as React from "react";
import { graphql, Link, PageProps } from "gatsby";
import { GatsbyImage, getImage } from "gatsby-plugin-image";
import { Helmet } from "react-helmet";
// import { take } from "ramda";
import classnames from "classnames";

import { getHelmetSafeBodyStyle, getAspectRatio } from "../utils";
import Nav from "../components/Nav";
// import ActionButtons from "../components/index/ActionButtons";
import { use100vh } from "react-div-100vh";
import { useMediaQuery } from "../useMediaQuery";

const env =
  process.env.GATSBY_ACTIVE_ENV || process.env.NODE_ENV || "development";

export type HomepageImage = Queries.IndexPageQuery["allFile"]["nodes"][number];

const getDifferentRand = (
  range: number,
  lastNs: number[],
  iterations = 0
): number => {
  const n = Math.floor(Math.random() * range);
  if (lastNs.findIndex((x) => x === n) > -1 && iterations < 5) {
    console.log("got dupe, trying again", n);
    return getDifferentRand(range, lastNs, iterations + 1);
  }
  return n;
};

const IndexPage = ({
  data: {
    allFile: { nodes: images },
  },
}: PageProps<Queries.IndexPageQuery>) => {
  const [isClient, setIsClient] = React.useState(false);
  const [imageIndex, setImageIndex] = React.useState(0);
  const image = React.useMemo(() => {
    return images[imageIndex];
  }, [images, imageIndex]);

  React.useEffect(() => {
    if (!isClient) {
      setIsClient(true);
    }
  }, [isClient]);

  const browserIsLandscape = useMediaQuery("(orientation: landscape)");

  React.useLayoutEffect(() => {
    if (browserIsLandscape) {
      setImageIndex(1);
    } else {
      setImageIndex(0);
    }
  }, [browserIsLandscape]);

  // const vibrant = getVibrant(image);
  // const ar = getAspectRatio(image);

  const screenHeight = use100vh();

  // const imageIsLandscape = isClient ? ar > 1 : true;

  // @ts-ignore
  const img = getImage(image);
  return (
    <>
      {/* @ts-ignore */}
      <Helmet>
        <title>Chuck Dries</title>
        <body
          className="bg-white transition-colors"
          // @ts-ignore
          style={getHelmetSafeBodyStyle({
            Muted: [0, 0, 0],
            LightMuted: [0, 0, 0],
            Vibrant: [0, 0, 0],
            LightVibrant: [0, 0, 0],
            DarkMuted: [238, 238, 238],
            DarkVibrant: [238, 238, 238],
          })}
        />
      </Helmet>
      <main className="font-sans flex flex-col h-screen">
        <Nav
          internalLinks={[
            { href: "/", label: "Home" },
            { href: "/photogallery/", label: "Gallery" },
          ]}
        />
        {isClient && (
          <Link
            className="flex-auto flex flex-col  m-4 md:m-8 mt-0 md:mt-0"
            to={`/photogallery/${image.base}/`}
          >
            <GatsbyImage
              alt=""
              className={screenHeight ? `${screenHeight - 160}px`: 'h-[calc(100vh-160px)]'}
              image={img!}
              loading="eager"
              objectFit={browserIsLandscape ? "cover" : "contain"}
              style={{
                height: "calc(100vh-160px)",
              }}
            />
          </Link>
        )}
      </main>
    </>
  );
};

export const query = graphql`
  query IndexPage {
    allFile(
      filter: {
        sourceInstanceName: { eq: "gallery" }
        base: { in: ["DSC02610-2.jpg", "DSC02615-2.jpg"] }
      }
      sort: { base: ASC }
    ) {
      nodes {
        relativePath
        base
        childImageSharp {
          fluid {
            aspectRatio
          }
          gatsbyImageData(
            layout: CONSTRAINED
            placeholder: NONE
            breakpoints: [750, 1080, 1366, 1920, 2560, 3840]
          )
        }
        fields {
          imageMeta {
            vibrant {
              ...VibrantColors
            }
          }
        }
      }
    }
  }
`;

export default IndexPage;
