import axios from 'axios';
import * as PropTypes from 'prop-types';
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import HomePage from './HomePage';
import withApi from './withApi';

const HomePageWithApi = withApi(HomePage);

class App extends React.Component {
  static propTypes = {
    api: PropTypes.func.isRequired,
    parseApiResponse: PropTypes.func.isRequired
  };

  static childContextTypes = {
    shop: PropTypes.shape({
      id: PropTypes.string,
      name: PropTypes.string,
      shopifyDomain: PropTypes.string,
      timeZone: PropTypes.string
    }),
    user: PropTypes.shape({
      id: PropTypes.string,
      email: PropTypes.string,
      firstName: PropTypes.string,
      initials: PropTypes.string,
      lastName: PropTypes.string
    })
  };

  state = {
    shop: null,
    user: null
  };

  getChildContext() {
    return {
      shop: this.state.shop,
      user: this.state.user
    };
  }

  componentWillMount() {
    const { api, parseApiResponse } = this.props;

    axios
      .all([
        api.get('/embedded/api/shop'),
        api.get('/embedded/api/users/current')
      ])
      .then(
        axios.spread(
          async (shopResponse, usersResponse) => {
            this.setState({
              shop: await parseApiResponse(shopResponse),
              user: await parseApiResponse(usersResponse)
            });
          }
        )
      );
  }

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

    if (!user) return <div />;

    return (
      <Switch>
        <Route exact path="/" component={HomePageWithApi} />
      </Switch>
    );
  }
}

export default App;