/*
 * Backpack - Skyscanner's Design System
 *
 * Copyright 2017 Skyscanner Ltd
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import PropTypes from 'prop-types';
import React from 'react';
import { cssModules } from 'bpk-react-utils';
import { BpkSpinner } from 'bpk-component-spinner';
import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
import { animations } from 'bpk-tokens/tokens/base.es6';

import STYLES from './bpk-image.scss';

const getClassName = cssModules(STYLES);

const Image = (props) => {
  const { shown, altText, onImageLoad, ...rest } = props;

  const imgClassNames = [getClassName('bpk-image__img')];

  if (!shown) {
    imgClassNames.push(getClassName('bpk-image__img--hidden'));
  }

  return (
    <img
      className={imgClassNames.join(' ')}
      alt={altText}
      onLoad={onImageLoad}
      {...rest}
    />
  );
};

Image.propTypes = {
  altText: PropTypes.string.isRequired,
  shown: PropTypes.bool.isRequired,
  onImageLoad: PropTypes.func.isRequired,
};

class BpkImage extends React.Component {
  constructor(props) {
    super(props);

    this.onImageLoad = this.onImageLoad.bind(this);

    this.placeholder = null;
  }

  onImageLoad() {
    if (this.props.onLoad) {
      this.props.onLoad();
    }
  }

  render() {
    const { width, height, altText, className, inView, loading, onLoad, style, ...rest } = this.props;

    const classNames = [getClassName('bpk-image')];

    const aspectRatio = width / height;
    const aspectRatioPc = `${100 / aspectRatio}%`;

    if (!loading) {
      classNames.push(getClassName('bpk-image--no-background'));
    }

    if (className) {
      classNames.push(className);
    }

    // wraps a div with maxWidth and maxHeight set iff full-width is no required.
    // This ensures that the css / html do not reserve too much spacing
    // when width 100% is not being used
    return (
      <div
        style={style}
      >
        <div
          ref={(div) => { this.placeholder = div; }}
          style={{ height: 0, paddingBottom: aspectRatioPc }}
          className={classNames.join(' ')}
        >
          <CSSTransitionGroup
            transitionName={{
              leave: getClassName('bpk-image__spinner--shown'),
              leaveActive: getClassName('bpk-image__spinner--hidden'),
            }}
            transitionEnterTimeout={parseInt(animations.durationBase, 10)}
            transitionLeaveTimeout={parseInt(animations.durationBase, 10)}
          >
            {loading &&
              <div className={getClassName('bpk-image__spinner')}>
                <BpkSpinner />
              </div>
            }
          </CSSTransitionGroup>
          {inView &&
            <Image shown={!loading} altText={altText} onImageLoad={this.onImageLoad} {...rest} />
          }
          {(typeof window === 'undefined' && (!inView || loading)) &&
          <noscript >
            <Image shown altText={altText} {...rest} />
          </noscript>
          }
        </div>
      </div>
    );
  }
}

BpkImage.propTypes = {
  altText: PropTypes.string.isRequired,
  height: PropTypes.number.isRequired,
  src: PropTypes.string.isRequired,
  width: PropTypes.number.isRequired,
  className: PropTypes.string,
  inView: PropTypes.bool,
  loading: PropTypes.bool,
  onLoad: PropTypes.func,
  style: PropTypes.object, // eslint-disable-line react/forbid-prop-types
};

BpkImage.defaultProps = {
  className: null,
  inView: true,
  loading: false,
  onLoad: null,
  style: {},
};

export default BpkImage;

@@ -1048,20 +1048,21 @@
 const %7B 
-show
+hidde
 n, altTe
@@ -1167,13 +1167,13 @@
 if (
-!show
+hidde
 n) %7B
@@ -1445,20 +1445,21 @@
 ired,%0A  
-show
+hidde
 n: PropT
@@ -1467,27 +1467,16 @@
 pes.bool
-.isRequired
 ,%0A  onIm
@@ -1515,16 +1515,60 @@
 ed,%0A%7D;%0A%0A
+Image.defaultProps = %7B%0A  hidden: false,%0A%7D;%0A%0A
 class Bp
@@ -3265,16 +3265,16 @@
 age 
-show
+hidde
 n=%7B
-!
 load
@@ -3467,14 +3467,8 @@
 age 
-shown 
 altT

Remove double-negative logic