import { useFilesQuery, File, useDeleteFileMutation, FilesQuery } from '../../../src/gql'
import { FunctionComponent } from 'react'
import { AdminList } from '../../../src/app'
import theme from '../../../src/styles/theme'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faLink } from '@fortawesome/free-solid-svg-icons'
import filesize from 'filesize'

const AdminFile: FunctionComponent<{ item: Partial<File>; className?: string }> = ({
  item,
  className,
}) => {
  return (
    <div className={className}>
      <div className='admin-file-title'>
        <a href={`/${item.path}`} download={item.filename}>
          <FontAwesomeIcon icon={faLink} height={14} />
          {' ' + item.filename}
        </a>
      </div>
      <div className='admin-file-description'>{item.comment}</div>
      <div className='admin-file-size'>{item.size ? filesize(item.size) : '?'}</div>
      <div className='admin-file-type'>{item.mimetype}</div>
      <div className='admin-file-mdate'>{new Date(item.updatedAt).toLocaleString()}</div>
      <style jsx>{`
        .${className} {
          display: flex;
        }
        .admin-file-title {
          width: 25%;
        }
        .admin-file-description {
          width: 35%;
        }
        .admin-file-size {
          width: 10%;
        }
        .admin-file-type {
          width: 10%;
        }
        .admin-file-mdate {
          width: 20%;
        }
        button {
          margin: 0 0.4em;
          padding: 0;
          color: ${theme.colors.buttonBackground};
          background-color: transparent;
        }
        button.false {
          color: #5557;
        }
      `}</style>
    </div>
  )
}

const AdminFiles = () => {
  const props = {
    name: 'Files',
    adminMenu: '/admin/file',
    get: useFilesQuery,
    remove: useDeleteFileMutation,
    dataKey: 'files' as keyof FilesQuery,
    Component: AdminFile,
  }
  return <AdminList {...props} />
}

export default AdminFiles