import { Alert, Descriptions, Divider } from 'antd'
import { useEffect } from 'react'
import type { ReactNode } from 'react'

import type { MaintenanceOpsExecutionWindow } from 'apiClient/services/devops/interface'

import { toLocal } from './Detail'

type DisplayOpsExecutionWindowProps = {
  executionWindow?: MaintenanceOpsExecutionWindow
  inWindowMessage: ReactNode
  onCheckResult?: (isInExecuteWindow?: boolean) => void
  outOfWindowMessage: ReactNode
}

const DisplayOpsExecutionWindow = ({
  executionWindow,
  inWindowMessage,
  onCheckResult,
  outOfWindowMessage
}: DisplayOpsExecutionWindowProps) => {
  const hasExecuteWindow = !!executionWindow?.id
  const currentTime = Math.floor(Date.now() / 1000)
  const isInExecuteWindow = hasExecuteWindow
    ? !!executionWindow?.start_at &&
      !!executionWindow?.end_at &&
      currentTime >= executionWindow.start_at &&
      currentTime <= executionWindow.end_at
    : undefined

  useEffect(() => {
    onCheckResult?.(isInExecuteWindow)
  }, [isInExecuteWindow, onCheckResult])

  if (!hasExecuteWindow) {
    return null
  }

  return (
    <>
      <Divider></Divider>
      <Descriptions title="Execute Window (Local Time)">
        <Descriptions.Item label="Start At">
          {toLocal(executionWindow?.start_at)}
        </Descriptions.Item>
        <Descriptions.Item label="End At">
          {toLocal(executionWindow?.end_at)}
        </Descriptions.Item>
      </Descriptions>
      <Alert
        type={isInExecuteWindow ? 'success' : 'warning'}
        showIcon
        message={isInExecuteWindow ? inWindowMessage : outOfWindowMessage}
      />
    </>
  )
}

export default DisplayOpsExecutionWindow