WrapperTable

import React, { useState, useEffect } from 'react'
import PropTypes from 'prop-types'
import Table from '../Table'
import MobileTable from '../MobileTable'
import Button from '../Button'
import RegisterUser from '../../containers/Register/RegisterUser'

import { Container, WrapperAddUser } from './styles'

const useViewport = () => {
  const [width, setWidth] = useState(window.innerWidth)

  useEffect(() => {
    const handleWindowResize = () => setWidth(window.innerWidth)
    window.addEventListener('resize', handleWindowResize)
    return () => window.removeEventListener('resize', handleWindowResize)
  }, [])

  return { width }
}

<<<<<<< HEAD
const WrapperTable = ({
  tableName,
  dataUser,
  isLoading,
  currentUser,
  geos,
  setPopUpMessage,
  setIsPopUpOpen,
}) => {
<<<<<<< HEAD
  const [modalIsOpen, setIsOpen] = useState(false)
=======
  const [modalIsOpen, setIsOpen] = useState(true)
=======
const WrapperTable = ({ tableName, isMaster, geos }) => {
  const [modalIsOpen, setIsOpen] = useState(false)
  const [editModalOpen, setEditModalOpen] = useState(false)
>>>>>>> 249956a... add edit user component
>>>>>>> 7c487c4... add edit user component
  const { width } = useViewport()
  const breakpoint = 750

  const handleRegisterNewUser = () => {
    setIsOpen(true)
  }

  const handleEditClick = () => {
    setEditModalOpen(true)
  }

  const closeModal = () => {
    setIsOpen(false)
    setEditModalOpen(false)
  }

  return (
    <>
      {modalIsOpen && (
        <RegisterUser
          modalTypeName="Adicionar novo"
          isOpen={modalIsOpen}
          closeModal={closeModal}
          tableName={tableName}
          geos={geos}
        />
      )}
      {editModalOpen && (
        <RegisterUser
          modalTypeName="Editar"
          isOpen={modalIsOpen}
          closeModal={closeModal}
          tableName={tableName}
          geos={geos}
          setPopUpMessage={setPopUpMessage}
          setIsPopUpOpen={setIsPopUpOpen}
        />
      )}

      <Container modalIsOpen={modalIsOpen}>
        <WrapperAddUser>
          <h2>{tableName}</h2>
          {currentUser.is_master === 1 ? (
            <Button
              text="Cadastrar novo usuário"
              noMargin
              lightColor
              handleClick={handleRegisterNewUser}
            />
          ) : null}
        </WrapperAddUser>
        {width <= breakpoint ? (
          <MobileTable
            dataUser={dataUser}
            isLoading={isLoading}
            isMaster={currentUser.is_master}
          />
        ) : (
          <Table
            dataUser={dataUser}
            isLoading={isLoading}
            isMaster={currentUser.is_master}
          />
        )}
      </Container>
    </>
  )
}

WrapperTable.propTypes = {
  tableName: PropTypes.string.isRequired,
  dataUser: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.number.isRequired,
      name: PropTypes.string.isRequired,
    })
  ).isRequired,
  isLoading: PropTypes.bool.isRequired,
  currentUser: PropTypes.shape({
    is_master: PropTypes.number.isRequired,
  }).isRequired,
}

export default WrapperTable