import React from 'react'
import { connect } from 'react-redux'
import Loading from '@/components/Loading'
import Overlay from '@/components/Overlay'

const BasicLayout = (props) => {
  const {person, children, onProps, ...leftProps} = props
  const loading = !person || !person.personId

  if (onProps) {
    onProps({person, ...leftProps})
  }

  return loading ?
  (
    <Overlay visible={loading} style={{ background: 'rgba(255, 255, 255, .9)' }}>
      <Loading />
    </Overlay>
  ) : children || null
}

export default connect(({ user }) => ({...user.userInfo || {}}))(BasicLayout)