import { useStaticQuery, graphql } from "gatsby"
import { useFlatten } from "./use-flatten"

export const useGallery = () => {
  const { galleryAll } = useStaticQuery(
    graphql`
      query Images {
        galleryAll: allImageSharp {
          edges {
            node {
              fluid(
                sizes: "(orientation: portrait) 50vw, (orientation: portrait) and (min-width: 750px) 30vw, (orientation: landscape) 30vw,(orientation: landscape) and (min-width: 1170px) 18vw,(orientation: landscape) and (min-width: 1800px) 16vw"
              ) {
                aspectRatio
                base64
                presentationHeight
                presentationWidth
                sizes
                src
                srcSet
              }
              parent {
                ... on File {
                  relativeDirectory
                }
              }
            }
          }
        }
      }
    `
  )
  const flatten = useFlatten(galleryAll.edges)
  return flatten
}
