require('./App.css');

const React = require('react');

const DirectoryListing = require('./DirectoryListing');

class App extends React.Component {
  static defaultProps = {
    availableVersions: []
  };

  handleChange = event => {
    window.location.href = window.location.href.replace(
      '@' + this.props.packageVersion,
      '@' + event.target.value
    );
  };

  render() {
    return (
      <div className="app">
        <header className="app-header">
          <h1>
            Index of /{this.props.packageName}@{this.props.packageVersion}
            {this.props.filename}
          </h1>

          <div className="app-version-selector">
            Version:{' '}
            <select
              id="version"
              defaultValue={this.props.packageVersion}
              onChange={this.handleChange}
            >
              {this.props.availableVersions.map(v => (
                <option key={v} value={v}>
                  {v}
                </option>
              ))}
            </select>
          </div>
        </header>

        <hr />

        <DirectoryListing
          filename={this.props.filename}
          entry={this.props.entry}
          entries={this.props.entries}
        />

        <hr />

        <address className="app-address">
          {this.props.packageName}@{this.props.packageVersion}
        </address>
      </div>
    );
  }
}

if (process.env.NODE_ENV === 'development') {
  const PropTypes = require('prop-types');

  const entryType = PropTypes.object;

  App.propTypes = {
    packageName: PropTypes.string.isRequired,
    packageVersion: PropTypes.string.isRequired,
    availableVersions: PropTypes.arrayOf(PropTypes.string),
    filename: PropTypes.string.isRequired,
    entry: entryType.isRequired,
    entries: PropTypes.objectOf(entryType).isRequired
  };
}

module.exports = App;