import * as React from 'react';
import classNames from 'classnames/bind';
import { Switch } from 'react-router';
import { Route } from 'react-router-dom';
import Login from 'components/routes/Paragraph/Login';

import Pages from 'components/routes/Paragraph/Pages';
import styleIdentifiers from './paragraph.scss';

const styles = classNames.bind(styleIdentifiers);

export interface ParagraphProps {
  me: Function;
  user: Record<string, any>;
}

interface ParagraphState {}

export default class Paragraph extends React.Component<ParagraphProps, ParagraphState> {
  componentDidMount() {
    const { me } = this.props;
    if (me) me();
  }

  render() {
    const { user } = this.props;

    if (user && !user.loaded && !user.data) return false;
    return (
      <div className={styles('Paragraph')}>
        <Switch>
          <Route path="/paragraph/login" component={Login} />
          <Route path="/paragraph/pages/:id" component={Pages} />
          <Route path="/paragraph/pages" component={Pages} />
        </Switch>
      </div>
    );
  }
}
