import { Col, Row, DatePicker, Collapse, Tooltip, Select } from 'antd'
import moment from 'moment'
import type { Moment } from 'moment'
import React, { useState } from 'react'

import { TimeRange } from '../TimeRange'

import { ChangeManagementInfo } from './ChangeManagement'
import { SLMInfo } from './SLAInfo'
import { TcocInfo } from './Tcoc'

type RangeValue = [Moment | null, Moment | null] | null

export const OperationDashboard: React.FC<
  React.PropsWithChildren<unknown>
> = () => {
  const [dates, setDates] = useState<RangeValue>(null)
  const [value, setValue] = useState<RangeValue>([
    moment().utc().add(-2, 'month').startOf('month'),
    moment().utc().endOf('month')
  ])
  const [timeRange, setTimeRange] = useState<TimeRange>({
    startTs: moment().utc().add(-2, 'month').startOf('month').unix(),
    endTs: moment().unix()
  })

  const disabledDate = (current: Moment) => {
    if (current < moment().utc().add(-12, 'month')) {
      return true
    }
    if (current > moment().utc().endOf('month')) {
      return true
    }
    if (!dates) {
      return false
    }
    const tooLate = dates[0] && current.diff(dates[0], 'months') > 12
    const tooEarly = dates[1] && dates[1].diff(current, 'months') > 12
    return !!tooEarly || !!tooLate
  }

  const onOpenChange = (open: boolean) => {
    if (open) {
      setDates([null, null])
    } else {
      setDates(null)
      const start = value![0]!.utc().startOf('month').unix()
      const end = value![1]!.utc().endOf('month').unix()
      if (timeRange.startTs === start && timeRange.endTs === end) {
        return
      }
      setTimeRange({
        startTs: start,
        endTs: end
      })
    }
  }

  return (
    <>
      <Row justify="end">
        <Col>
          <DatePicker.RangePicker
            picker="month"
            ranges={{
              'This Month': [
                moment().utc().startOf('month'),
                moment().utc().endOf('month')
              ],
              'Last 3 Months': [
                moment().utc().add(-2, 'month').startOf('month'),
                moment().utc().endOf('month')
              ],
              'Last 6 Months': [
                moment().utc().add(-5, 'month').startOf('month'),
                moment().utc().endOf('month')
              ],
              'Last 1 Year': [
                moment().utc().add(-11, 'month').startOf('month'),
                moment().utc().endOf('month')
              ]
            }}
            value={dates || value}
            disabledDate={disabledDate}
            onOpenChange={onOpenChange}
            onCalendarChange={(val) => {
              setDates(val)
            }}
            onChange={(val) => {
              setValue(val)
            }}
          />
        </Col>
      </Row>

      <Collapse ghost defaultActiveKey={['sla', 'tcoc', 'changeManagement']}>
        <Collapse.Panel header="SLA" key="sla">
          <SLMInfo timeRange={timeRange} />
        </Collapse.Panel>
        <Collapse.Panel header="Incidents/Alerts" key="tcoc">
          <TcocInfo timeRange={timeRange} />
        </Collapse.Panel>
        <Collapse.Panel header="ChangeManagement" key="changeManagement">
          <ChangeManagementInfo timeRange={timeRange} />
        </Collapse.Panel>
      </Collapse>
    </>
  )
}