import { formatTimestamp } from '@/analyst/utilities'
import Label from '@/users/UsersSelection/Label'
import type { Intent } from '@blueprintjs/core'
import { Button, Colors, Dialog, DialogBody } from '@blueprintjs/core'
import { Cross } from '@blueprintjs/icons'
import { css } from '@emotion/css'
import type { Exercise } from '@inject/graphql/fragment-types'
import { dialog, dialogBody } from '@inject/shared/css/dialog'
import fullWidthTable from '@inject/shared/css/fullWidthTable'
import { useState, type FC } from 'react'
import ConfigInfo from '../ConfigInfo'
import TickOrCross from '../TickOrCross'

const configClass = css`
  margin-top: 1rem;
`

interface InfoButtonProps {
  exercise: Exercise
  intent?: Intent
}

const InfoButton: FC<InfoButtonProps> = ({ exercise, intent }) => {
  const [dialogOpen, setDialogOpen] = useState(false)

  const {
    name,
    definition,
    teams,
    exerciseStart,
    finished,
    running,
    createdBy,
    timestampCreated,
    config,
  } = exercise

  return (
    <>
      <Button
        icon='info-sign'
        title='Exercise information'
        active={dialogOpen}
        onClick={() => setDialogOpen(true)}
        intent={intent}
      />
      <Dialog
        isOpen={dialogOpen}
        onClose={() => setDialogOpen(false)}
        title={<span title={`Exercise ${name}`}>{`Exercise ${name}`}</span>}
        className={dialog}
      >
        <DialogBody className={dialogBody}>
          <table className={fullWidthTable(11)}>
            <tbody>
              <tr>
                <th>Name:</th>
                <td title={name}>{name}</td>
              </tr>
              <tr>
                <th>Definition:</th>
                <td>{definition?.name || definition?.id}</td>
              </tr>
              <tr>
                <th>Teams:</th>
                <td>{teams.length}</td>
              </tr>
              <tr>
                <th>Started at:</th>
                <td>
                  {exerciseStart ? (
                    formatTimestamp(exerciseStart)
                  ) : (
                    <Cross color={Colors.RED3} />
                  )}
                </td>
              </tr>
              <tr>
                <th>Running:</th>
                <td>
                  <TickOrCross value={running} />
                </td>
              </tr>
              <tr>
                <th>Finished:</th>
                <td>
                  <TickOrCross value={finished} />
                </td>
              </tr>
              <tr>
                <th>Created by:</th>
                <td>
                  {createdBy ? <Label user={createdBy} /> : 'a deleted user'}
                </td>
              </tr>
              <tr>
                <th>Created at:</th>
                <td>{formatTimestamp(timestampCreated)}</td>
              </tr>
            </tbody>
          </table>
          <ConfigInfo
            config={config}
            className={configClass}
            tableClassName={fullWidthTable(25)}
          />
        </DialogBody>
      </Dialog>
    </>
  )
}

export default InfoButton
