import { Button, Collapse } from '@blueprintjs/core'
import type { Config } from '@inject/graphql/fragment-types'
import { useState, type FC } from 'react'
import TickOrCross from '../TickOrCross'

interface ConfigInfoProps {
  config: Config
  className?: string
  tableClassName?: string
}

const ConfigInfo: FC<ConfigInfoProps> = ({
  config,
  className,
  tableClassName,
}) => {
  const [isOpen, setIsOpen] = useState(false)

  const {
    exerciseDuration,
    customEmailSuffix,
    updateIntervalS,
    enabledFeatures,
  } = config

  return (
    <div className={className}>
      <Button onClick={() => setIsOpen(!isOpen)}>
        {`${isOpen ? 'Hide' : 'Show'} config`}
      </Button>
      <Collapse isOpen={isOpen}>
        <table className={tableClassName}>
          <tbody>
            <tr>
              <th>Exercise duration:</th>
              <td>{`${exerciseDuration} minutes`}</td>
            </tr>
            <tr>
              <th>Custom email suffix:</th>
              <td>{customEmailSuffix}</td>
            </tr>
            <tr>
              <th>Update interval:</th>
              <td>{`${updateIntervalS} seconds`}</td>
            </tr>
            <tr>
              <th>Show exercise time:</th>
              <td>
                <TickOrCross
                  value={enabledFeatures.includes('SHOW_EXERCISE_TIME')}
                />
              </td>
            </tr>
            <tr>
              <th>Roles enabled:</th>
              <td>
                <TickOrCross value={enabledFeatures.includes('ENABLE_ROLES')} />
              </td>
            </tr>
            <tr>
              <th>Tools enabled:</th>
              <td>
                <TickOrCross value={enabledFeatures.includes('ENABLE_TOOLS')} />
              </td>
            </tr>
            <tr>
              <th>Questionnaires enabled:</th>
              <td>
                <TickOrCross
                  value={enabledFeatures.includes('ENABLE_QUESTIONNAIRES')}
                />
              </td>
            </tr>
            <tr>
              <th>Emails enabled:</th>
              <td>
                <TickOrCross value={enabledFeatures.includes('ENABLE_EMAIL')} />
              </td>
            </tr>
            <tr>
              <th>Emails between teams enabled:</th>
              <td>
                <TickOrCross
                  value={enabledFeatures.includes('EMAIL_BETWEEN_TEAMS')}
                />
              </td>
            </tr>
          </tbody>
        </table>
      </Collapse>
    </div>
  )
}

export default ConfigInfo
