import { Button, Callout, Classes, Collapse, Colors } from '@blueprintjs/core'
import { css } from '@emotion/css'
import { useLoopStatus } from '@inject/graphql/utils/useExerciseLoopStatusSubscription'
import { useEffect, useState } from 'react'
const bg = css`
  background-color: ${Colors.LIGHT_GRAY5};

  .${Classes.DARK} & {
    background-color: ${Colors.DARK_GRAY4};
  }
`
const StopAnnounce = () => {
  const { running, loading } = useLoopStatus()
  const [open, setOpen] = useState(false)

  useEffect(() => {
    if (running === false && !loading) {
      setOpen(true)
    } else if (loading || (running && !loading)) {
      setOpen(false)
    }
  }, [running, loading])

  return (
    <Collapse isOpen={open}>
      <div className={bg}>
        <Callout
          intent='warning'
          icon='warning-sign'
          className={css`
            display: flex;
          `}
        >
          <span>This exercise had been stopped</span>
          <Button
            icon='cross'
            style={{
              minHeight: '16px',
              minWidth: '16px',
              padding: 0,
              marginLeft: 'auto',
            }}
            minimal
            onClick={() => setOpen(false)}
          />
        </Callout>
      </div>
    </Collapse>
  )
}

export default StopAnnounce
