import React, { Component } from 'react'
import { Route } from 'react-router'

import EditorGate from 'app/views/editor/editor.gate'
import AlignContainer from 'app/views/editor/align/align.container'
import ParagraphContainer from 'app/views/editor/paragraph/paragraph.container'
import MediaContainer from 'app/views/editor/media/media.container'
import ViewerContainer from 'app/views/viewer/viewer.container'

export default class Router extends Component {
  render() {
    return (
      <EditorGate episode_id={this.props.match.params.episode_id}>
        <Route path={"/editor/:episode_id/timeline/"} component={AlignContainer} />
        <Route path={"/editor/:episode_id/transcript/"} component={ParagraphContainer} />
        <Route path={"/editor/:episode_id/media/"} component={MediaContainer} />
        <Route path={"/editor/:episode_id/viewer/"} component={ViewerContainer} />
        <Route path={"/editor/:episode_id/"} exact component={MediaContainer} />
      </EditorGate>
    )
  }
}