import { KTCard } from "../../../../_digifi/helpers"
import { Content } from "../../../../_digifi/layout/components/content"
import { ToolbarWrapper } from "../../../../_digifi/layout/components/toolbar"
import { UsersListHeader } from "../user-started/users-list/components/header/UsersListHeader"
import { ListViewProvider, useListView } from "../user-started/users-list/core/ListViewProvider"
import { QueryRequestProvider } from "../user-started/users-list/core/QueryRequestProvider"
import { QueryResponseProvider } from "../user-started/users-list/core/QueryResponseProvider"
import { UsersTable } from "../user-started/users-list/table/UsersTable"
import { UserEditModal } from "../user-started/users-list/user-edit-modal/UserEditModal"

const UsersList = () => {
  const {itemIdForUpdate} = useListView()
  return (
    <>
      <KTCard>
        <UsersListHeader />
        <UsersTable />
      </KTCard>
      {itemIdForUpdate !== undefined && <UserEditModal />}
    </>
  )
}

const UserStartedList = () => (
  <QueryRequestProvider>
    <QueryResponseProvider>
      <ListViewProvider>
        <ToolbarWrapper />
        <Content>
          <UsersList />
        </Content>
      </ListViewProvider>
    </QueryResponseProvider>
  </QueryRequestProvider>
)

export {UserStartedList}