"use strict";

var __importDefault = this && this.__importDefault || function (mod) {
  return mod && mod.__esModule ? mod : {
    "default": mod
  };
};

Object.defineProperty(exports, "__esModule", {
  value: true
});
/**
 * @todo split out the `get` into deps
 */

const react_1 = __importDefault(require("react"));

const exotic_1 = require("exotic");

const classnames_1 = __importDefault(require("classnames"));

const omit_1 = require("uxui-modules/utils/omit");

const fixture_1 = require("./fixture");

const deps_1 = require("./deps");

const styled_1 = require("./styled");
/**
 * @todo 1. picture
 * @todo 2. figure
 * @todo 3. href, wrap in image
 */


class Image extends react_1.default.PureComponent {
  constructor() {
    super(...arguments);
    this.state = {
      isLoaded: false
    };

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

  get alt() {
    const alt = deps_1.fromPropsToAlt(this.props); // bad data @fixme

    if (exotic_1.isObj(alt)) {
      return deps_1.fromPropsToAlt(alt);
    } else {
      return alt;
    }
  }

  get src() {
    const src = deps_1.fromPropsToSrc(this.props);

    if (exotic_1.isObj(src)) {
      return deps_1.fromPropsToSrc(src);
    } else {
      return src;
    }
  }

  get passthroughProps() {
    // stupid proptypes plugin
    // eslint-disable-next-line
    // const keys = Object.keys(Image['propTypes'])
    const keys = Object.keys(fixture_1.propTypes || fixture_1.defaultProps);
    return omit_1.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 Object.assign({}, this.props, {
      alt: this.alt,
      src: this.src,
      passthroughProps: this.passthroughProps,
      className: this.className,
      containerClassName: this.containerClassName,
      text: this.caption
    });
  }

  get className() {
    return classnames_1.default('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_1.default.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 = classnames_1.default('image-atom-figure', containerClasses);
    const imageContainerAttributes = {
      className
    };

    const ImageWrap = props => {
      return react_1.default.createElement(styled_1.StyledFigure, Object.assign({}, imageContainerAttributes), props.children);
    };

    return ImageWrap;
  }

  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
    };
    const imageView = react_1.default.createElement(styled_1.StyledImage, Object.assign({}, imageAttributes, passthroughProps));
    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 && react_1.default.createElement(styled_1.StyledCaption, {
      className: captionClass
    }, text);
  }

  render() {
    const {
      Wrap,
      imageView,
      captionView
    } = this;
    return react_1.default.createElement(Wrap, null, imageView, captionView);
  }

}

Image.propTypes = fixture_1.propTypes;
Image.defaultProps = fixture_1.defaultProps;
exports.Image = Image;
exports.default = Image; //# sourceMappingURL=Image.js.map