import { formatTimestamp } from '@/analyst/utilities'
import Label from '@/users/UsersSelection/Label'
import { Button, Colors, Dialog, DialogBody } from '@blueprintjs/core'
import { Cross } from '@blueprintjs/icons'
import { css } from '@emotion/css'
import type { Definition } 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'

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

interface InfoButtonProps {
  definition: Definition
}

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

  const {
    name,
    description,
    version,
    roles,
    channels,
    uploadedBy,
    timestampCreated,
    prerequisites,
    targetAudience,
    config,
  } = definition

  return (
    <>
      <Button
        icon='info-sign'
        active={dialogOpen}
        onClick={() => setDialogOpen(true)}
      />
      <Dialog
        isOpen={dialogOpen}
        onClose={() => setDialogOpen(false)}
        title={<span title={`Definition ${name}`}>{`Definition ${name}`}</span>}
        className={dialog}
      >
        <DialogBody className={dialogBody}>
          <table className={fullWidthTable(14)}>
            <tbody>
              <tr>
                <th>Name:</th>
                <td>{name}</td>
              </tr>
              {description && (
                <tr>
                  <th>Description:</th>
                  <td>{description}</td>
                </tr>
              )}
              <tr>
                <th>Version:</th>
                <td>{version}</td>
              </tr>
              <tr>
                <th>Roles:</th>
                <td>
                  {/* TODO: add Description */}
                  {roles.length ? (
                    roles.map((role, index) => (
                      <div
                        key={role.id}
                      >{`${role.displayName}${index < roles.length - 1 ? ',' : ''}`}</div>
                    ))
                  ) : (
                    <Cross color={Colors.RED3} />
                  )}
                </td>
              </tr>
              <tr>
                <th>Channels:</th>
                <td>
                  {/* TODO: add Description */}
                  {channels.map((channel, index) => (
                    <div
                      key={channel.id}
                      title={channel.description || channel.displayName}
                    >{`${channel.displayName} (${channel.type})${index < channels.length - 1 ? ',' : ''}`}</div>
                  ))}
                </td>
              </tr>
              {prerequisites && (
                <tr>
                  <th>Prerequisites:</th>
                  <td>
                    <ul>
                      {prerequisites.map(prerequisite => (
                        <li key={prerequisite}>{prerequisite}</li>
                      ))}
                    </ul>
                  </td>
                </tr>
              )}
              {targetAudience && (
                <tr>
                  <th>Target audience:</th>
                  <td>{targetAudience}</td>
                </tr>
              )}
              <tr>
                <th>Uploaded by:</th>
                <td>
                  {uploadedBy ? <Label user={uploadedBy} /> : 'a deleted user'}
                </td>
              </tr>
              <tr>
                <th>Uploaded at:</th>
                <td>{formatTimestamp(timestampCreated)}</td>
              </tr>
            </tbody>
          </table>
          <ConfigInfo
            config={config}
            className={configClass}
            tableClassName={fullWidthTable(25)}
          />
        </DialogBody>
      </Dialog>
    </>
  )
}

export default InfoButton
