import { Button, Classes, Collapse } from '@blueprintjs/core'
import { css, cx } from '@emotion/css'
import { useState, type FC } from 'react'
import { removeNotify } from '../engine'
import type { NotificationProps } from '../typing'

const Notification: FC<NotificationProps> = ({
  intent,
  msg,
  timestamp,
  errorJSON,
}) => {
  const [open, setOpen] = useState(false)

  return (
    <div
      className={cx({
        [Classes.CALLOUT]: true,
        [Classes.CALLOUT_HAS_BODY_CONTENT]: true,
        [Classes.INTENT_WARNING]: intent === 'warning',
        [Classes.INTENT_DANGER]: intent === 'danger',
      })}
      onClick={() => setOpen(prev => !prev)}
    >
      <Button
        outlined
        intent='primary'
        style={{ float: 'right' }}
        icon='trash'
        onClick={() => removeNotify(msg, timestamp)}
      />
      <h3
        className={css`
          font-weight: bold;
          margin: 0;
        `}
      >
        {msg}
      </h3>
      <Collapse isOpen={open}>
        <br />
        <code style={{ overflowWrap: 'anywhere' }}>{errorJSON}</code>
      </Collapse>
    </div>
  )
}

export default Notification
