image.jsx

import React, { useEffect } from "react"
import { StaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"
import { connect } from "react-redux"
import { toggleLightBox } from "../state/app"
import { isFunction } from "lodash"

/* props : {
  src : String!
  description: String!,
  type: string,
  dimensions: type array [widthX, heighty]

  toggleBox : {
    type: string,
    open: boolean,
    ressource: src
  }
} */

const Image = props => {
  useEffect(() => {
    const { lightBox } = props
    if (!lightBox || !lightBox.open || lightBox.open === "null") return
    //OPEN LIGHTBOX in other case
  })

  return (
    <StaticQuery
      query={graphql`
        query {
          allFile(filter: { sourceInstanceName: { eq: "assets" } }) {
            edges {
              node {
                relativePath
                name
                childImageSharp {
                  fluid(maxWidth: 800, quality: 100) {
                    ...GatsbyImageSharpFluid
                  }
                }
              }
            }
          }
        }
      `}
      render={data => {
        //TODO: can we find a better place than the component for this?
        const path = process.env.NODE === "production" ? "/public/" : ""

        const onImageClick = (src, type) => {
          const { dispatch } = props

          if (!src) return null

          document.body.style.overflow = "hidden"
          dispatch(
            toggleLightBox({
              open: true,
              ressource: src,
              type: type,
            })
          )
        }

        const image = data.allFile.edges.find(n => {
          return n.node.relativePath.includes(`${path + props.src}`)
        })

        if (!image) return null
        
        //THINKING OUT LOUD: 
        /** we migth want to do this:
         * we need this in the query then
         * 
         * fixed(width: 125, height: 125) {
                    ...GatsbyImageSharpFixed
                  }
         * 
         * if(type === 'imageSmall')
         * //to use on small screens
         * return (
         *  <Img 
         *    fixed={image.node.childImageSharp.fixed}
         * />
         * )
         * if(type === 'imageLarge')
         *  //see below
         * 
         * QUESTION: *PRO, corrected sized media and possibility to controll sizes * CON. might bloat up the bundle
         */

         const x = props?.dimensions?.x;
         const y = props?.dimensions?.y;

        if(!props.dimensions) {
          return (
            <div
              role="button"
              onClick={() => {
                const {src, type} = props;
                if(type === 'noShow') return 
                onImageClick(src, type)
              }}
            >
              <Img
                alt={props.description}
                fluid={image.node.childImageSharp.fluid}
              />
            </div>
          )
        }
        else {
          return (
            <div
              role="button"
              onClick={() => {
                const {src, type} = props;
                if(type === 'noShow') return 
                onImageClick(src, type)
              }}
            >
              <Img
                width={x}
                height={y}
                alt={props.description}
                fluid={image.node.childImageSharp.fluid}
              />
            </div>
          )
        }
       
      }}
    />
  )
}

//export default Image
export default connect(
  state => ({
    toggleBox: state.app.toggleBox,
  }),
  null
)(Image)