import { FunctionComponent } from 'react'
import AdminPage from './AdminPage'
import Link from 'next/link'
import theme from '../../styles/theme'
import { QueryResult, MutationTuple } from '@apollo/client'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faEdit, faTrash, faEye, faPlusCircle } from '@fortawesome/free-solid-svg-icons'

interface IAdminList {
  name: string
  adminMenu?: string
  dataKey: string
  get: QueryResult<any>
  remove?: MutationTuple<any, any>
  Component: FunctionComponent<any>
}

const AdminList = ({ name, adminMenu, dataKey, get, remove, Component }: IAdminList) => {
  const [removeFunction, removeResult] = remove ?? [undefined, undefined]

  let content
  if (get.loading) content = <p>Loading data...</p>
  else if (get.error) content = <p>Error loading data.</p>
  else if (!get.data) content = <p>No data found.</p>
  else
    content = (
      <ul>
        {get.data[dataKey].map((item: any) => (
          <li key={item.id}>
            <Component key={item.id} item={item} className='admin-component' />

            <div className='admin-toolbar'>
              <Link href={`/${adminMenu}/[id]`} as={`${adminMenu}/${item.id}`}>
                <a title='edit'>
                  <button type='button'>
                    <FontAwesomeIcon icon={faEdit} height={16} />
                  </button>
                </a>
              </Link>
              {removeFunction && removeResult && (
                <button
                  onClick={(event) => {
                    removeFunction()
                  }}
                  disabled={removeResult.loading}
                  title='delete'
                >
                  <FontAwesomeIcon icon={faTrash} height={16} />
                </button>
              )}
            </div>
          </li>
        ))}
        <style jsx>{`
          ul {
            padding: 0;
          }
          ul :global(li) {
            padding: 0.2em 0.5em;
            display: flex;
            list-style: none;
            align-items: center;
            background-color: #0770;
            transition: background-color 250ms ease-in-out;
            border-top: 1px solid #0002;
            position: relative;
          }
          ul :global(li:last-child) {
            border-bottom: 1px solid #0002;
          }
          ul :global(li:hover) {
            background-color: ${theme.colors.formHighlightBackground}44;
          }
          ul :global(.admin-component) {
            flex-grow: 1;
          }
          ul :global(.admin-toolbar button) {
            padding: 0.4em;
            margin: 0;
            color: ${theme.colors.buttonBackground};
            background-color: transparent;
          }

          ul :global(a) {
            color: ${theme.colors.button};
            text-decoration: none;
          }
          ul :global(li .admin-toolbar) {
            display: none;
            position: absolute;
            top: 0;
            right: 0;
            width: 80px;
            background-color: ${theme.colors.background};
          }
          ul :global(li:hover .admin-toolbar) {
            display: flex;
          }
        `}</style>
      </ul>
    )

  return (
    <AdminPage>
      <h2>{name}</h2>
      <Link href={`${adminMenu}/create`}>
        <a>
          <button>
            <FontAwesomeIcon icon={faPlusCircle} height={36} />
          </button>
        </a>
      </Link>
      {content}
      <style jsx>{`
        button {
          color: ${theme.colors.buttonBackground};
          background-color: transparent;
          display: inline;
          margin: 0.4rem;
          padding: 0;
        }
      `}</style>
    </AdminPage>
  )
}

export default AdminList
