/**
 * @todo split out the `get` into deps
 */
import React from 'react'
import { isObj } from 'exotic'
import toClassName from 'classnames'
import { omit } from '@skava/modules/___dist/utils/omit'
import { defaultProps, propTypes } from './fixture'
import { fromPropsToAlt, fromPropsToSrc } from './deps'
import { ImageProps, ImageState } from './typings'
import { StyledFigure, StyledImage, StyledCaption } from './styled'

/**
 * @todo 1. picture
 * @todo 2. figure
 * @todo 3. href, wrap in image
 */
class Image extends React.PureComponent<ImageProps, ImageState> {
  static propTypes = propTypes
  static defaultProps = defaultProps

  state = {
    isLoaded: false,
  }

  get alt() {
    const alt = fromPropsToAlt(this.props)
    // bad data @fixme
    if (isObj(alt)) {
      return fromPropsToAlt(alt)
    } else {
      return alt
    }
  }
  get src() {
    const src = fromPropsToSrc(this.props)
    if (isObj(src)) {
      return fromPropsToSrc(src)
    } else {
      return src
    }
  }
  get passthroughProps() {
    // stupid proptypes plugin
    // eslint-disable-next-line
    // const keys = Object.keys(Image['propTypes'])
    const keys = Object.keys(propTypes || defaultProps)
    return omit(this.props, keys)
    // const passthroughProps = { ...this.props }
    // // eslint-disable-next-line
    // Object.keys(Image['propTypes']).forEach(key => {
    //   delete passthroughProps[key]
    // })
    // return passthroughProps
  }
  get caption() {
    return this.props.text || this.props.labelText || this.props.captionText || this.props.caption
  }
  get attributes() {
    return {
      ...this.props,
      alt: this.alt,
      src: this.src,
      passthroughProps: this.passthroughProps,
      className: this.className,
      containerClassName: this.containerClassName,
      text: this.caption,
    }
  }
  get className() {
    return toClassName(
      'image-atom',
      this.props.className || this.props.classes || this.props.classList.img
    )
  }
  get containerClassName() {
    return (
      this.props.containerClasses ||
      this.props.classList.container ||
      this.props.classList.figure ||
      this.props.figureClassName ||
      ''
    )
  }
  get captionClass() {
    return (
      this.props.captionClass || this.props.captionClassName || this.props.classList.caption || ''
    )
  }

  get imgStyle() {
    const { src } = this
    return {
      backgroundImage: `url(${src})`,
    }
  }
  get Wrap() {
    // @example <Image nowrap />
    // @example <Image hasNoWrap={true} />
    if (this.props.hasNoWrap === true || this.props.nowrap === true) {
      return React.DivFree
    }
    // @example
    // @todo - renderProp
    // Wrap(props) {
    //   return <div className="image-container">{props.children}</div>
    // },

    /**
     * @todo use a renderProp from context
     */
    // isFunction
    if (this.props.Wrap) {
      return this.props.Wrap
    }

    const { containerClasses } = this.attributes
    // @todo remove?
    const className = toClassName('image-atom-figure', containerClasses)

    const imageContainerAttributes = {
      className,
    }

    const ImageWrap = props => {
      return <StyledFigure {...imageContainerAttributes}>{props.children}</StyledFigure>
    }
    return ImageWrap
  }

  handleImageLoad = event => {
    this.setState({
      isLoaded: true,
    })
  }

  get style() {
    if (this.state.isLoaded === false) {
      return {
        // ignoring this for now... isn't awesome... maybe with <picture>
        // backgroundImage: `url(${toPlaceholder()})`,
        // backgroundRepeat: 'no-repeat',
        // backgroundSize: 'cover',
      }
    } else {
      return {}
    }
  }
  get imageView() {
    const { style, attributes, imgStyle } = this

    const {
      className,
      // computed
      src,
      alt,
      passthroughProps,
    } = attributes

    const imageAttributes = {
      src: `${src}`,
      alt: `${alt}`,
      className: `${className}`,
      style,
      // style: imgStyle,
    }

    const imageView = (
      <StyledImage
        {...imageAttributes}
        {...passthroughProps}
        // onLoad={this.handleImageLoad}
      />
    )

    return imageView
  }

  get captionView() {
    const {
      // props
      captionClass,
      text,

      // use this instead of caption???
      children,
    } = this.attributes

    // @todo - how to use div or figcaption?
    // @todo - autogenerate id for this component? ada?
    return children
      ? children
      : text && <StyledCaption className={captionClass}>{text}</StyledCaption>
  }
  render() {
    const { Wrap, imageView, captionView } = this

    return (
      <Wrap>
        {imageView}
        {captionView}
      </Wrap>
    )
  }
}

export { Image }
export default Image