import LinkButton from '@/components/LinkButton'
import type { Section } from '@/components/Sidebar'
import Sidebar from '@/components/Sidebar'
import Table from '@/components/Table'
import { useNavigate } from '@/router'
import UserCreator from '@/users/UserCreator'
import Active from '@/users/UserTable/Filters/Active'
import Columns from '@/users/UserTable/Filters/Columns'
import Tags from '@/users/UserTable/Filters/Tags'
import UserGroups from '@/users/UserTable/Filters/UserGroups'
import useUserTable from '@/users/UserTable/useUserTable'
import type { UserColumn } from '@/users/UserTable/utils'
import { AUTH_GROUPS, USER_COLUMNS } from '@/users/UserTable/utils'
import UsersUploader from '@/users/UsersUploader'
import { useSetPageTitle, useStaffBoundary } from '@/utils'
import usePrependNavbar from '@/views/Navbar/usePrependNavbar'
import { sidebarClass } from '@/views/classes'
import { Button, InputGroup, Navbar } from '@blueprintjs/core'
import { css } from '@emotion/css'
import Reloader from '@inject/graphql/components/Reloader'
import type { User } from '@inject/graphql/fragment-types'
import { ReloadTable } from '@inject/graphql/mutations.client'
import { useState } from 'react'
import { useClient } from 'urql'

const page = css`
  display: flex;
  height: 100%;
`

const body = css`
  flex-basis: fit-content;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
`

const Page = () => {
  useSetPageTitle('User management')
  useStaffBoundary()
  const client = useClient()

  const nav = useNavigate()

  // TODO: add reset for filters and columns
  const [searchString, setSearchString] = useState('')
  const [groups, setGroups] = useState(AUTH_GROUPS)
  const [active, setActive] = useState<{ active: boolean; inactive: boolean }>({
    active: true,
    inactive: true,
  })
  const [tags, setTags] = useState<string[]>([])
  const [columns, setColumns] = useState<UserColumn[]>(USER_COLUMNS)
  const tableProps = useUserTable({
    onClick: (userId: string) => nav('/users/:userId', { params: { userId } }),
    groups,
    active,
    tags,
    searchString,
    columns,
  })

  const sections: Section[] = [
    {
      id: 'options',
      name: 'Options',
      node: (
        <>
          <Columns selected={columns} setSelected={setColumns} />
          <Reloader
            minimal
            fill
            alignText='left'
            queries={() => {
              client.mutation(ReloadTable, {}).toPromise()
            }}
            withLabel
            text='Reload list'
          />
        </>
      ),
    },
    {
      id: 'filters',
      name: 'Filters',
      node: (
        <>
          <UserGroups selected={groups} setSelected={setGroups} />
          <Active selected={active} setSelected={setActive} />
          <Tags selected={tags} setSelected={setTags} />
        </>
      ),
    },
  ]
  const element = usePrependNavbar(
    <>
      <LinkButton
        link={['/exercise-panel']}
        button={{ text: 'Exercise Panel', icon: 'panel', minimal: true }}
      />
      <UserCreator />
      <UsersUploader />
      <Navbar.Divider />
      <InputGroup
        placeholder='Search...'
        leftIcon='search'
        className={css`
          flex-grow: 1;
        `}
        value={searchString}
        onChange={event => setSearchString(event.target.value)}
        rightElement={
          <Button
            icon='cross'
            minimal
            onClick={() => setSearchString('')}
            disabled={!searchString}
          />
        }
      />
    </>
  )

  return (
    <div className={page}>
      <div className={body}>
        <Table<User> {...tableProps} />
      </div>
      {element}
      <Sidebar position='right' className={sidebarClass} sections={sections} />
    </div>
  )
}

export default Page
