/*import { useEffect, useState } from 'react'
import { Formik, Form, useField } from 'formik'
import { useUsersQuery, useUserDeleteMutation, useUserUpdateMutation, UsersQuery, Permission, User, UsersQueryResult } from '../../gql'
import { TextInput, Checkbox } from '../../form'


const emptyUser = {
  name: '',
  email: '',
  interests: [],
  admin: false,
  instructor: false,
  id: ''
}

interface UserInputProps {
  user: UsersQueryResult
  path: string
  touched: boolean[]
}

function dbToForm(user: UsersQueryResult): any {
  if (!user) return null
  const { __typename, id, permissions, ...returnValue } = user
  for (let key of Object.keys(Permission)) {
    (returnValue as any)[key] = permissions.includes(Permission[key as keyof object])
  }
  return returnValue
}

function formToDb() { }

const UserInput = ({ user, path, touched }: any) => {
  const [updateUser, updateData] = useUserUpdateMutation()
  const [deleteUser, deleteData] = useUserDeleteMutation()

  function composeData(formValues: any) {
    if (!touched) return {}
    const { admin, instructor, ...otherTouched } = touched
    const permissions = (admin || instructor) ? Object.entries(Permission).filter(([key, value]) => user[key]) : {}
    return {
      ...Object.keys(otherTouched).map(key => formValues[key]),
      ...permissions
    }
  }

  console.log('UserInput', user, composeData(user))

  return (
    <tr>
      <td><input type='checkbox' /></td>
      <td><TextInput name={`${path}.name`} type='text' placeholder='Name' /></td>
      <td><TextInput name={`${path}.email`} type='email' placeholder='eMail' /></td>
      {Object.keys(Permission).map(permission => (
        <td><Checkbox name={`${path}.${permission}`} /></td>
      ))}
      <td></td>
      <td>
        <button type='button' disabled={deleteData.loading} onClick={async event => {
          try {
            const deletedUser = await deleteUser({ variables: { email: user.email } })
            console.log(deletedUser)
          } catch (error) {
            console.log(error.message)
          }
        }}>Delete</button>
        <button type='button' disabled={!touched || updateData.loading} onClick={async event => {
          try {
            const updatedUser = await updateUser({ variables: { email: user.email, data: user } })
            console.log(updatedUser)
          } catch (error) {
            console.log(error.message)
          }
        }}>Save</button>
      </td>
    </tr>
  )
}

const UserAdmin = () => {
  const { data, error, loading } = useUsersQuery()

  useEffect(() => {
  }, [data])

  if (error) return <p>Error: {error.message}</p>
  if (loading) return <p>Loading...</p>
  if (data) {

    const formData = data.users.map(user => {
    })

    return (
      <Formik
        initialValues={formData}
        onSubmit={values => {
          console.log(values)
        }}
      >
        {({ values, setValues, touched }) => (
          <>
            <Form>
              <table>
                <thead>
                  <tr>
                    <th></th>
                    <th>Name</th>
                    <th>Email</th>
                    {Object.keys(Permission).map(permission => (
                      <th key={permission}>{permission}</th>
                    ))}
                    <th>Interests</th>
                    <th>Actions</th>
                  </tr>
                </thead>
                <tbody>
                  {values.map((user, index) => user && (
                    <UserInput path={`[${index}]`} user={user} touched={touched[index]} key={user.id} />
                  ))}
                </tbody>
              </table>
            </Form>
            <button onClick={() => {
              setValues([
                ...values,
                { ...emptyUser }
              ])
            }}>Add user</button>
          </>
        )}
      </Formik>
    )
  }
}
*/

const UserAdmin = () => <p>nothing here.</p>;

export default UserAdmin;
