OrganizationPage

import React, { Component } from 'react'
//  libs
import page from 'lib/page'
import styled from 'styled-components'
import { object } from 'prop-types'
import { compose, graphql } from 'react-apollo'
import { connect } from 'react-redux'
//  components
import MainLayout from 'layouts/MainLayout'
import SectionHeader from 'components/SectionHeader'
import Wrapper from 'components/Wrapper'
import WizardOpenButton from 'components/UI-elements/Buttons/WizardOpenButton'
import NewUserWizard from 'components/Organization/Wizards/NewUserWizard'
import NewTeamWizard from 'components/Organization/Wizards/NewTeamWizard'
import EditTeamWizard from 'components/Organization/Wizards/EditTeamWizard'
import EditUserWizard from 'components/Organization/Wizards/EditUserWizard'
import TableUsers from 'components/Organization/Tables/TableUsers'
import TableTeams from 'components/Organization/Tables/TableTeams'
//  context
import { modalTypes } from 'context/constants/modals'
//  graphql
import { usersQuery } from 'graphql/queries/users'
import { teamsQuery } from 'graphql/queries/teams'
//  utils
import get from 'lodash/get'

const Container = styled.div`
  display: flex;

  @media (max-width: 768px) {
    flex-direction: column;
  }
`

class OrganizationPage extends Component {
  static propTypes = {
    usersData: object,
    teamsData: object
  }

  refetchTeamsData = () => {
    this.props.teamsData.refetch()
  }

  refetchUsersData = () => {
    this.props.usersData.refetch()
  }

  render () {
    const { usersData } = this.props
    const { teamsData } = this.props

    const users = get(usersData, 'users', [])
    const teams = get(teamsData, 'teams', [])

    return (
      <MainLayout>
        <SectionHeader
          title='Organization'
        >
          <Container>
            <WizardOpenButton modalType={modalTypes.ORGANIZATION_NEW_USER_WIZARD}>
              Create new user
            </WizardOpenButton>
            <WizardOpenButton modalType={modalTypes.ORGANIZATION_NEW_TEAM_WIZARD} marginLeft='10px'>
              Create new team
            </WizardOpenButton>
          </Container>
        </SectionHeader>
        <Wrapper>
          <TableUsers normal data={users} tableName='Users' />
          <TableTeams data={teams} tableName='Teams' marginTop='50px' />
        </Wrapper>
        <NewUserWizard usersData={usersData} teams={teams} />
        <NewTeamWizard teamsData={teamsData} />
        <EditTeamWizard
          teamsData={teamsData}
          refetchTeamsData={this.refetchTeamsData}
          refetchUsersData={this.refetchUsersData}
        />
        <EditUserWizard teams={teams} refetchUsersData={this.refetchUsersData} />
      </MainLayout>
    )
  }
}

const mapStateToProps = ({ currentUser }) => ({
  currentUser: currentUser.data.me
})

export default compose(
  page({}),
  connect(mapStateToProps),
  graphql(usersQuery, {
    name: 'usersData',
    options: ({ currentUser }) => ({
      variables: {
        company_id: currentUser.company_id
      }
    })
  }),
  graphql(teamsQuery, {
    name: 'teamsData',
    options: ({ currentUser }) => ({
      variables: {
        company_id: currentUser.company_id
      }
    })
  })
)(OrganizationPage)