import React from 'react'
import Img from 'gatsby-image'
import * as classNames from 'classnames'
import { IFluid } from '../../types';
let styles = require('./styles.module.scss')

interface IProps {
  alt?: string
  className?: string
  fitViewport?: boolean
  fluid: IFluid
  style?: {}
  density?: number;
}

const NonStretchedImage = ({
  alt,
  className,
  fitViewport,
  fluid,
  density,
  style,
}: IProps) => {
  if (fluid && fluid.presentationWidth) {
    var normalizedProps = {
      alt,
      fluid,
      style: {
        ...(style || {}),
        '--presentationWidth': `${fluid.presentationWidth}px`,
      },
      className: classNames({
        [className]: !!className,
        [styles.imageFitViewport]: fitViewport,
        [styles.image]: true,
        ['image50']: density === 50,
        ['image75']: density === 75,
      }),
    }
  }

  // TODO: fix image width

  let image
  if (fitViewport) {
    image = (
      <div className={styles.imageFitViewport}>
        <Img {...normalizedProps} alt={alt} Tag='figure'/>
      </div>
    )
  } else {
    image = <Img {...normalizedProps} alt={alt} Tag='figure'/>
  }

  return image
}

export default NonStretchedImage
