import { Center, Stack, UnstyledButton, Text, Space, Alert, Box } from '@tidbcloud/uikit'
import { IconInfoCircle } from '@tidbcloud/uikit/icons'
import { useMemoizedFn } from 'ahooks'
import { useEffect, useState } from 'react'

import { HeroComponent } from 'dbaas/components/Measurement'
import { eventTracking } from 'dbaas/utils/tracking'

import { useEventsContext } from './context'
import EventsFilters from './EventsFilters'
import EventsTable from './EventsTable'
import { FEATURE_NAME } from './helpers'
import { EventItem, EventsReq } from './model'

const Page = () => {
  const eventsCtx = useEventsContext()

  const [eventItems, setEventItems] = useState<EventItem[]>([])
  const [typeOptions, setTypeOptions] = useState<string[]>([])
  const [statusOptions, setStatusOptions] = useState<string[]>([])

  const [lastReq, setLastReq] = useState<EventsReq | null>(null)
  const [cursor, setCursor] = useState('')

  const [loading, setLoading] = useState(false)
  const [loaded, setLoaded] = useState(false)
  const [loadingMore, setLoadingMore] = useState(false)

  const handleFiltersChange = useMemoizedFn((req: EventsReq) => {
    setCursor('')
    setLastReq(req)
    setLoading(true)
    eventsCtx.ds
      .getEvents(req)
      .then((d) => {
        setEventItems(d.events ?? [])
        setCursor(d.cursor)

        // the following commented code is only for test
        // if (process.env.NODE_ENV === 'development') {
        //   const events = d.events ?? []
        //   setEventItems([
        //     ...events,
        //     ...events,
        //     ...events,
        //     ...events,
        //     ...events,
        //     ...events,
        //     ...events,
        //     ...events,
        //     ...events
        //   ])
        // }
      })
      .finally(() => {
        setLoading(false)
        setLoaded(true)
      })
  })

  const handleLoadMore = () => {
    eventTracking(`${FEATURE_NAME} Load More Button Clicked`)
    if (lastReq && cursor !== '' && !loadingMore) {
      setLoadingMore(true)
      eventsCtx.ds
        .getEvents({ ...lastReq, cursor })
        .then((d) => {
          setEventItems(eventItems.concat(d.events ?? []))
          setCursor(d.cursor)
        })
        .finally(() => {
          setLoadingMore(false)
        })
    }
  }

  useEffect(() => {
    eventsCtx.ds.getEventsFilters().then((d) => {
      setTypeOptions(d.event_types)
      setStatusOptions(d.event_status)
    })
  }, [])

  return (
    // wd-flex, wd-flex-col, wd-h-full is important
    // <div className="wd-flex wd-flex-col wd-h-full">
    <Stack h="100%" gap={0}>
      {/* wd-flex-none is important */}
      <div className="wd-flex-none">
        <Box px={24} pb={24}>
          <Alert color="peacock" icon={<IconInfoCircle size={14} />} classNames={{ icon: 'wd-mr-0' }}>
            Only events within the last 7 days are recorded. Learn more about{' '}
            <a href="https://docs.pingcap.com/tidbcloud/tidb-cloud-events">Events</a>.
          </Alert>
        </Box>
        <EventsFilters
          onFiltersChange={handleFiltersChange}
          typeOptions={typeOptions ?? []}
          statusOptions={statusOptions}
        />
      </div>
      {/* wd-flex-auto, wd-overflow-auto is important */}
      <div className="wd-relative wd-flex-auto overlay-y-scrollbar">
        <EventsTable events={eventItems} loading={loading} />

        {cursor !== '' && (
          <Center h={64}>
            <UnstyledButton onClick={handleLoadMore} sx={(theme) => ({ color: theme.colors.carbon[8] })}>
              <Text p={8} size="sm" fw="bold">
                {loadingMore ? 'Loading more...' : 'More'}
              </Text>
            </UnstyledButton>
          </Center>
        )}
        {loaded && <HeroComponent />}

        <Space h={32} />
      </div>
    </Stack>
  )
}

export default Page