import { useQuery, gql } from '@apollo/client'
import Button from '@mui/material/Button'
import classnames from 'classnames'
import * as R from 'ramda'
import React from 'react'
import { cardState } from '../../../components/CollapsibleCard'
import { Label1, H4 } from '../../../components/typography'

import AlertsTable from './AlertsTable'

const NUM_TO_RENDER = 3

const GET_ALERTS = gql`
  query getAlerts {
    alerts {
      id
      type
      detail
      message
      created
      read
      valid
    }
    machines {
      deviceId
      name
    }
  }
`

const Alerts = ({ onReset, onExpand, size }) => {
  const showAllItems = size === cardState.EXPANDED
  const { data } = useQuery(GET_ALERTS)
  const alerts = R.path(['alerts'])(data) ?? []
  const machines = R.compose(
    R.map(R.prop('name')),
    R.indexBy(R.prop('deviceId')),
  )(data?.machines ?? [])
  const alertsLength = alerts.length

  return (
    <>
      <div className="flex justify-between">
        <H4 noMargin>{`Alerts (${alertsLength})`}</H4>
        {showAllItems && (
          <Label1 noMargin className="-mt-1">
            <Button
              onClick={onReset}
              size="small"
              disableRipple
              disableFocusRipple
              className="p-0 text-zodiac normal-case">
              {'Show less'}
            </Button>
          </Label1>
        )}
      </div>
      <div
        className={classnames({ 'm-0 mt-2': true, 'max-h-115': showAllItems })}>
        <div className="w-full flex-1">
          {!alerts.length && (
            <Label1 className="text-comet -ml-1 h-30">
              No new alerts. Your system is running smoothly.
            </Label1>
          )}
          <AlertsTable
            numToRender={showAllItems ? alerts.length : NUM_TO_RENDER}
            alerts={alerts}
            machines={machines}
          />
        </div>
      </div>
      {!showAllItems && alertsLength > NUM_TO_RENDER && (
        <div>
          <Label1 className="text-center mb-0">
            <Button
              onClick={() => onExpand('alerts')}
              size="small"
              disableRipple
              disableFocusRipple
              className="p-0 text-zodiac normal-case">
              {`Show all (${alerts.length})`}
            </Button>
          </Label1>
        </div>
      )}
    </>
  )
}
export default Alerts