/*!
  Copyright (c) 2017 Jed Watson.
  Licensed under the MIT License (MIT), see
  http://jedwatson.github.io/classnames
*/
/* global define */

(function () {
	'use strict';

	var hasOwn = {}.hasOwnProperty;

	function classNames () {
		var classes = [];

		for (var i = 0; i < arguments.length; i++) {
			var arg = arguments[i];
			if (!arg) continue;

			var argType = typeof arg;

			if (argType === 'string' || argType === 'number') {
				classes.push(arg);
			} else if (Array.isArray(arg) && arg.length) {
				var inner = classNames.apply(null, arg);
				if (inner) {
					classes.push(inner);
				}
			} else if (argType === 'object') {
				for (var key in arg) {
					if (hasOwn.call(arg, key) && arg[key]) {
						classes.push(key);
					}
				}
			}
		}

		return classes.join(' ');
	}

	if (typeof module !== 'undefined' && module.exports) {
		classNames.default = classNames;
		module.exports = classNames;
	} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {
		// register as 'classnames', consistent with npm package name
		define('classnames', [], function () {
			return classNames;
		});
	} else {
		window.classNames = classNames;
	}
}());

/*
  Progress bar script
*/
const ProgressBar = ({ className, progress, labelLeft }) => {
  let progressInt = parseInt(progress)
  const progressClassPrefix = `progress-bar__progress--step-`
  const progressClassNames = {
    [`${progressClassPrefix}1`]: progressInt <= 25,
    [`${progressClassPrefix}2`]: progressInt > 25 && progressInt <= 50,
    [`${progressClassPrefix}3`]: progressInt > 50 && progressInt <= 99,
    [`${progressClassPrefix}completed`]: progressInt === 100
  }

  return (
    <div className={classNames('progress-bar', className)}>
      <div className="progress-bar__bar">
        <div
          className={classNames('progress-bar__progress', progressClassNames)}
          style={{width: progress + '%'}}>
          <div className="progress-bar__tick-wrapper">
            <svg className='progress-bar__tick icon-tick' viewBox='0 0 512 512'><path d="m135 280l97 97c20 20 20 52 0 72-20 20-53 20-73 0l-96-96c-20-20-20-53 0-73 20-20 52-20 72 0z m300-106c20 20 20 52 0 72l-193 193c-20 20-53 20-73 0-20-20-20-52 0-72l194-193c20-20 52-20 72 0z"/></svg>
          </div>
        </div>
      </div>
      <span className={classNames('progress-bar__label', { 'progress-bar__label--left': labelLeft })}>
        {
          progressInt === 0 ?
            `No scenes completed` :
            `${progress}% of scenes completed`
        }
      </span>
    </div>
  )
}

class CodepenProgressBar extends React.Component {
  constructor() {
    super()
    this.state = {
      progress: 50,
      value: 50
    }
  }

  onChange = (e) => {
    this.setState({ 
      progress: e.currentTarget.value,
      value: e.currentTarget.value
    })
  };

  render() {
    return (
      <div>
        <ProgressBar progress={this.state.progress} />
        <input type='range' value={this.state.value} onChange={this.onChange}/>
      </div>
    )
  }
}


/*
 * Render the above component into the div#progress
 */
ReactDOM.render(
  <CodepenProgressBar />, document.getElementById('progress'));