DataGrid

import React from 'react'

import {
  Box,
  Button,
  Checkbox,
  CheckboxGroup,
  ControlLayout,
  DataGrid,
  DataGridBody,
  DataGridDataCell,
  DataGridHeader,
  DataGridHeaderCell,
  DataGridRow,
  DataGridSelectRowDataCell,
  DataGridSelectRowHeaderCell,
  Dialog,
  DialogActions,
  DialogBody,
  DialogFooter,
  DialogHeader,
  Link,
  Menu,
  MenuItem,
  Pagination,
  PaginationNavigation,
  PaginationNavigationButton,
  PaginationPerPageSelectField,
  TextField,
  useDialog,
  useMenu,
} from '@gusto/workbench'
import { CaretDown, Filter, Search } from '@gusto/workbench-icons'

import { employees } from './_employees'

export const Basic = () => {
  // default "columns" checkbox set on page load
  const defaultColumnsOptions = [
    'name',
    'department',
    'jobTitle',
    'emailAddress',
  ]

  // default filters and their selection on page load
  const defaultFilterNames = {
    Department: [],
    Title: [],
  }

  // Menu props for the actionsMenu and filterColumnsMenu in `sm` breakpoint
  const [actionsMenuProps, actionsMenuButtonProps] = useMenu()

  // filter and "columns" Dialog 'open' state
  const [filtersDialogProps, filtersDialogButtonProps] = useDialog()
  const [columnsDialogProps, columnsDialogButtonProps] = useDialog()

  const [rowSelected, setRowSelected] = React.useState<{
    [key: number]: boolean
  }>({})

  // used to keep track of the onChange of the "columns" checkboxes in columnsDialog
  const [columnsCheckboxChecked, setColumnsCheckboxChecked] = React.useState<
    string[]
  >(defaultColumnsOptions)

  // used to make changes to the table on "Apply" of the filters dialog
  const [columnsDisplayed, setColumnsDisplayed] = React.useState<string[]>(
    defaultColumnsOptions,
  )

  // used to keep track of the onChange of the filter checkboxes
  const [filterCheckboxChecked, setFilterCheckboxChecked] = React.useState<{
    [key: string]: string[]
  }>(defaultFilterNames)

  // used to make changes to the table on "Apply" of the filters dialog
  const [appliedFilterCheckboxes, setAppliedFilterCheckboxes] = React.useState<{
    [key: string]: string[]
  }>(defaultFilterNames)

  // used to determine filter count, if filters are applied, and filters data
  const filterCount =
    appliedFilterCheckboxes.Department.length +
    appliedFilterCheckboxes.Title.length

  const isDataFiltered =
    appliedFilterCheckboxes.Department.length > 0 ||
    appliedFilterCheckboxes.Title.length > 0

  const filteredEmployees = isDataFiltered
    ? employees.filter(employee => {
        return (
          appliedFilterCheckboxes.Department.includes(employee.Department) ||
          appliedFilterCheckboxes.Title.includes(employee.Title)
        )
      })
    : employees

  // used to determine if the "select all" checkbox is checked, indeterminate, or unchecked
  const rowSelectedCount = Object.values(rowSelected).filter(val => val).length
  const selectAllChecked = rowSelectedCount === filteredEmployees.length
  const selectAllIndeterminate = rowSelectedCount > 0 && !selectAllChecked

  // an example of keeping track of rows selected
  const toggleGridRowSelection = (id: number) => {
    setRowSelected(currSelected => ({
      ...currSelected,
      [id]: !rowSelected[id],
    }))
  }

  // an example of creating the "select all" functionality
  const toggleAllRows = () => {
    employees
      .map(employee => employee.Digit)
      .forEach(digit => {
        setRowSelected(currRowsSelected => ({
          ...currRowsSelected,
          [digit]: !selectAllChecked,
        }))
      })
  }

  // an example of keeping a state management of each columns checkbox being checked
  const columnsCheckboxOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const checkboxChecked = e.target.checked

    if (checkboxChecked) {
      setColumnsCheckboxChecked(currChecked => [...currChecked, e.target.value])
    } else {
      setColumnsCheckboxChecked(currChecked =>
        currChecked.filter(value => value !== e.target.value),
      )
    }
  }

  // an example of resetting columns options
  const resetColumnsOptions = () => {
    setColumnsCheckboxChecked(defaultColumnsOptions)
  }

  // an example of updating the visibility of columns
  const updateColumnVisibility = () => {
    setColumnsDisplayed(columnsCheckboxChecked)
  }

  // an example of keeping a state management of each filter checkbox being checked
  const filterCheckboxOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    // getting the group name from CheckboxGroup
    const groupName = e.target.name
    const checkboxChecked = e.target.checked

    if (checkboxChecked) {
      setFilterCheckboxChecked(currChecked => ({
        ...currChecked,
        [groupName]: [...currChecked[groupName], e.target.value],
      }))
    } else {
      setFilterCheckboxChecked(currChecked => ({
        ...currChecked,
        [groupName]: currChecked[groupName].filter(
          value => value !== e.target.value,
        ),
      }))
    }
  }

  // an example of applying filters on "apply" button submit within filters Dialog
  const applyFilters = () => {
    filtersDialogProps.onClose()
    setAppliedFilterCheckboxes(filterCheckboxChecked)
  }

  // an example of resetting filters within the filters Dialog
  const resetFilters = () => {
    setFilterCheckboxChecked(defaultFilterNames)
  }

  return (
    <>
      <ControlLayout
        searchField={
          <TextField
            label="Search"
            before={<Search />}
            placeholder="Search"
            visuallyHideLabel
          />
        }
        selectAllCheckbox={
          <Checkbox
            type="checkbox"
            label={
              rowSelectedCount > 0
                ? `${rowSelectedCount} Selected`
                : `Select all (${filteredEmployees.length})`
            }
            checked={selectAllChecked}
            indeterminate={selectAllIndeterminate}
            onChange={toggleAllRows}
          />
        }
        selectAllActionsMenu={
          selectAllChecked || selectAllIndeterminate ? (
            <>
              <Button
                {...actionsMenuButtonProps}
                after={<CaretDown />}
                size="small"
                variant="primary"
              >
                Actions
              </Button>
              <Menu
                {...actionsMenuProps}
                aria-label="Employee information actions menu"
              >
                <MenuItem>Lorem ipsum</MenuItem>
                <MenuItem>Lorem ipsum</MenuItem>
              </Menu>
            </>
          ) : null
        }
        actions={
          <>
            <Button
              variant="tertiary"
              size="small"
              before={<Filter />}
              {...filtersDialogButtonProps}
            >
              Filter{filterCount > 0 ? ` (${filterCount})` : null}
            </Button>
            <Button
              variant="tertiary"
              size="small"
              {...columnsDialogButtonProps}
            >
              Columns
            </Button>
            <Dialog
              aria-label="Employee information filters"
              {...filtersDialogProps}
            >
              <DialogHeader>Filters</DialogHeader>

              <DialogBody>
                <Box marginBottom={6}>
                  <CheckboxGroup name="Department" legend="Departments">
                    {Array.from(
                      new Set(employees.map(employee => employee.Department)),
                    ).map(department => {
                      return (
                        <Checkbox
                          key={`emp-type-checkbox-${department}`}
                          value={department}
                          label={department}
                          checked={filterCheckboxChecked.Department.includes(
                            department,
                          )}
                          onChange={filterCheckboxOnChange}
                        />
                      )
                    })}
                  </CheckboxGroup>
                </Box>
                <Box marginBottom={6}>
                  <CheckboxGroup name="Title" legend="Job title">
                    {Array.from(
                      new Set(employees.map(employee => employee.Title)),
                    ).map(title => {
                      return (
                        <Checkbox
                          key={`emp-type-checkbox-${title}`}
                          value={title}
                          label={title}
                          checked={filterCheckboxChecked.Title.includes(title)}
                          onChange={filterCheckboxOnChange}
                        />
                      )
                    })}
                  </CheckboxGroup>
                </Box>
              </DialogBody>

              <DialogFooter>
                <DialogActions>
                  <Button variant="primary" onClick={applyFilters}>
                    Apply
                  </Button>
                  <Button onClick={resetFilters}>Clear all filters</Button>
                </DialogActions>
              </DialogFooter>
            </Dialog>
            <Dialog
              aria-label="Employee information visible columns"
              {...columnsDialogProps}
            >
              <DialogHeader>Columns</DialogHeader>

              <DialogBody>
                <CheckboxGroup
                  name="columnsOptions"
                  legend="Column options"
                  visuallyHideLabel
                >
                  <Checkbox
                    value="name"
                    label="Name"
                    checked={columnsCheckboxChecked.includes('name')}
                    onChange={columnsCheckboxOnChange}
                  />
                  <Checkbox
                    value="department"
                    label="Department"
                    checked={columnsCheckboxChecked.includes('department')}
                    onChange={columnsCheckboxOnChange}
                  />
                  <Checkbox
                    value="jobTitle"
                    label="Job title"
                    checked={columnsCheckboxChecked.includes('jobTitle')}
                    onChange={columnsCheckboxOnChange}
                  />
                  <Checkbox
                    value="emailAddress"
                    label="Email address"
                    checked={columnsCheckboxChecked.includes('emailAddress')}
                    onChange={columnsCheckboxOnChange}
                  />
                </CheckboxGroup>
              </DialogBody>

              <DialogFooter>
                <DialogActions>
                  <Button
                    variant="primary"
                    onClick={() => {
                      columnsDialogProps.onClose()
                      updateColumnVisibility()
                    }}
                  >
                    Apply
                  </Button>
                  <Button onClick={resetColumnsOptions}>Reset</Button>
                </DialogActions>
              </DialogFooter>
            </Dialog>
          </>
        }
      />
      <DataGrid
        aria-label="Employee information"
        gridSectionStyles={{ maxHeight: '50rem' }}
      >
        <DataGridHeader>
          <DataGridRow>
            <DataGridSelectRowHeaderCell />
            {columnsDisplayed.includes('name') && (
              <DataGridHeaderCell sortable>Name</DataGridHeaderCell>
            )}
            {columnsDisplayed.includes('department') && (
              <DataGridHeaderCell sortable>Department</DataGridHeaderCell>
            )}
            {columnsDisplayed.includes('jobTitle') && (
              <DataGridHeaderCell>Job Title</DataGridHeaderCell>
            )}
            {columnsDisplayed.includes('emailAddress') && (
              <DataGridHeaderCell>Email address</DataGridHeaderCell>
            )}
          </DataGridRow>
        </DataGridHeader>
        <DataGridBody>
          {filteredEmployees.map(employee => {
            return (
              <DataGridRow
                key={`emp-${employee.Digit}`}
                rowSelected={rowSelected[employee.Digit]}
              >
                <DataGridSelectRowDataCell
                  label={`Select row ${employee['Name-FL']}`}
                  checked={rowSelected[employee.Digit] || false}
                  onChange={() => toggleGridRowSelection(employee.Digit)}
                />
                {columnsDisplayed.includes('name') && (
                  <DataGridHeaderCell scope="row">
                    <Link href="https://gusto.com">{employee['Name-FL']}</Link>
                  </DataGridHeaderCell>
                )}
                {columnsDisplayed.includes('department') && (
                  <DataGridDataCell>{employee.Department}</DataGridDataCell>
                )}
                {columnsDisplayed.includes('jobTitle') && (
                  <DataGridDataCell>{employee.Title}</DataGridDataCell>
                )}
                {columnsDisplayed.includes('emailAddress') && (
                  <DataGridDataCell>
                    <TextField
                      label="Email address"
                      visuallyHideLabel
                      value={employee.Email}
                      readOnly
                    />
                  </DataGridDataCell>
                )}
              </DataGridRow>
            )
          })}
        </DataGridBody>
      </DataGrid>
      <Pagination
        position="sticky"
        aria-label="Employee information table"
        variant="joined"
      >
        <PaginationPerPageSelectField />
        <PaginationNavigation>
          <PaginationNavigationButton variant="first" />
          <PaginationNavigationButton variant="previous" />
          <PaginationNavigationButton variant="next" />
          <PaginationNavigationButton variant="last" />
        </PaginationNavigation>
      </Pagination>
    </>
  )
}