import React from 'react';
import { StyledComponent } from '@emotion/styled';
import Img from 'gatsby-image';
import { StaticQuery, graphql } from 'gatsby';

import BackgroundImage from 'gatsby-background-image';

interface ImageProps {
  fluid: any;
  isBackground?: boolean;
  classId?: string;
  styledComponent?: StyledComponent<any, any, any>;
}

class Image extends React.Component<ImageProps> {

  static defaultProps = {
    isBackground: false
  };

  renderBackground = (fluid: any) => {
    const { styledComponent: StyledBackground } = this.props;
    return StyledBackground ?
      <StyledBackground {...this.props} fluid={fluid.fluid} /> :
      <BackgroundImage {...this.props} fluid={fluid.fluid} />
  }

  render(): JSX.Element {
    return (
      <StaticQuery
        query={graphql`
          query PlaceholderImage {
            file(relativePath: { eq: "placeholder.png" }) {
              childImageSharp {
                fluid {
                  ...GatsbyImageSharpFluid
                }
              }
            }
        }
      `}
        render={({ file }): JSX.Element => {
          const placeholder = file.childImageSharp;
          const { fluid, isBackground } = this.props;
          const hasFluidImage = fluid && fluid !== null;

          const imageUrl = hasFluidImage ? fluid.fluid : placeholder.fluid;
          return isBackground
            ? this.renderBackground(fluid)
            : <Img {...this.props} fluid={imageUrl} />;

        }}
      />
    );
  }
}

export default Image;