import '../styles/styles.scss'
import { connect } from 'react-redux'
import { compose, withState } from 'recompose'
import { readAsync as readWallsAsync } from '../redux/actions/walls'
import { readAsync as readFloorAsync } from '../redux/actions/floor'
import { readAsync as readTeleporterAsync } from '../redux/actions/teleporter'
import { readAsync as readPartyAgentAsync } from '../redux/actions/partyAgent'
import { readAsync as readEncountersAsync } from '../redux/actions/encounters'
import { readAsync as readItemsAsync } from '../redux/actions/items'
import { readAsync as readCombatAsync } from '../redux/actions/combat'
import Dungeon from '../components/Dungeon'
import DMInterface from '../components/DMInterface'
import DMView from '../components/DMView'
import SignInWithGoogleButton from './SignInWithGoogleButton'
import SignOutButton from './SignOutButton'
import CombatScreen from './CombatScreen'
import PartyScreen from './PartyScreen'
import PlayerView from './PlayerView'
import { SignInModal } from 'react-misc-toolbox'
import firebase, { GoogleAuthProvider } from '../firebase/firebase'
// const asyncRequest = async () => { 	const response = await
// fetch(`http://localhost:2500/graphql`, { 		method: `POST`, 		headers: {
// 			'content-type': `application/json`, 		}, 		body: JSON.stringify({ query:
// `{greeting}` }), 	}) 	const responseBody = await response.json()
// 	console.log(responseBody) }
//
//asyncRequest()

const index = ({ uid }) => (
  <React.Fragment>
    {/* <SignInWithGoogleButton /> */}
    <SignOutButton />{' '}
    <SignInModal
      {...{
        handleCreateUserWithEmailAndPassword: firebase.auth().createUserWithEmailAndPassword,
        handleSignInWithEmailAndPassword: firebase.auth().signInWithEmailAndPassword,
        handleSignInWithGoogle: () => firebase.auth().signInWithPopup(GoogleAuthProvider),
        renderTrigger: ({ getTriggerProps }) => {
          return <button {...{ ...getTriggerProps() }}>Sign in modal</button>
        },
      }}
    />
    {uid === `FADX1p5BAadWHq9fybWCC9Mumyk1` ? (
      <React.Fragment>
        {/* <DMView /> */}
        <DMInterface />
      </React.Fragment>
    ) : (
      <PlayerView />
    )}
  </React.Fragment>
)

index.getInitialProps = async ({ store }) => {
  console.log(`getInitialProps for nameless-crawler`)
  await store.dispatch(readWallsAsync())
  await store.dispatch(readPartyAgentAsync())
  await store.dispatch(readEncountersAsync())
  await store.dispatch(readFloorAsync())
  await store.dispatch(readItemsAsync())
  await store.dispatch(readCombatAsync())
  await store.dispatch(readTeleporterAsync())
}

const mapStateToProps = state => ({ uid: state.auth.currentUser.uid })

const enhance = compose(
  connect(
    mapStateToProps,
    { readTeleporterAsync }
  )
)
export default enhance(index)