import TimeRangePicker from '@tidb-cloud-uikit/components/TimeRangePicker'
import { Box, Button, Flex, Loader, Popover, Select, Slider, Stack } from '@tidbcloud/uikit'
import { TimeRange } from '@tidbcloud/uikit/biz'
import { IconChevronDown, IconExpand01 } from '@tidbcloud/uikit/icons'
import dayjs from 'dayjs'
import React, { useState } from 'react'

import AutoRefreshButton from 'dbaas/screens/ClusterV2/components/AutoRefreshButton'
import { eventTracking } from 'dbaas/utils/tracking'

import { useStyles } from '../keyviz.styles'
import { QUICK_RANGES, DATA_TAG_SELECT_OPTIONS, FEATURE_NAME } from '../utils/helpers'

type BrightnessSliderProps = {
  brightness?: number
  onBrightnessChange?: (v: number) => void
  onBrightnessOpen?: () => void
}

function BrightnessSlider({ brightness, onBrightnessChange, onBrightnessOpen }: BrightnessSliderProps) {
  const [opened, setOpened] = useState(false)
  const { classes } = useStyles()

  function handleOpen(isOpen: boolean) {
    setOpened(isOpen)
    if (isOpen) {
      onBrightnessOpen?.()
    }
  }

  return (
    <Popover width={532} position="bottom-start" shadow="md" opened={opened} onChange={handleOpen}>
      <Popover.Target>
        <Button
          variant="default"
          styles={(theme) => ({
            root: {
              backgroundColor: theme.colors.carbon[0],
              borderColor: opened ? theme.colors.carbon[9] : theme.colors.carbon[4],
              '&:hover': {
                backgroundColor: theme.colors.carbon[0],
                borderColor: opened ? theme.colors.carbon[9] : theme.colors.carbon[5]
              },
              '&:active': { transform: 'none' }
            },
            label: { fontWeight: 400 }
          })}
          rightSection={<IconChevronDown size={14} />}
          data-mp-event="mp-brightness-1691461018299"
          onClick={() => handleOpen(!opened)}
        >
          Brightness
        </Button>
      </Popover.Target>
      <Popover.Dropdown>
        <Stack>
          <Box className={classes.brightnessContainer}>
            <div className="keyVizBrightness" />
          </Box>
          <Slider
            defaultValue={brightness ?? 0}
            min={-6}
            max={6}
            label={(value) => value.toFixed(1)}
            step={0.1}
            onChange={onBrightnessChange}
          />
        </Stack>
      </Popover.Dropdown>
    </Popover>
  )
}

type ToolbarProps = {
  loading?: boolean

  timeRange: TimeRange
  onTimeRangeChange?: (timeRange: TimeRange) => void

  kind: string
  onKindChange?: (kind: string) => void

  prepareSelection?: boolean
  toggleSelection?: () => void
  onResetSelection?: () => void

  refreshInterval: number
  onRefreshIntervalChange?: (v: number) => void
  onRefresh?: () => void

  brightness?: number
  onBrightnessChange?: (v: number) => void
  onBrightnessOpen?: () => void

  openSetting?: () => void
}

export const Toolbar: React.FC<React.PropsWithChildren<ToolbarProps>> = ({
  loading = false,

  timeRange,
  onTimeRangeChange,

  kind,
  onKindChange,

  prepareSelection = false,
  toggleSelection,
  onResetSelection,

  refreshInterval,
  onRefreshIntervalChange,
  onRefresh,

  brightness,
  onBrightnessChange,
  onBrightnessOpen
}) => {
  const brightnessSlider = (
    <BrightnessSlider
      brightness={brightness}
      onBrightnessChange={onBrightnessChange}
      onBrightnessOpen={onBrightnessOpen}
    />
  )

  const selectAndZoomBtns = (
    <Button.Group>
      <Button
        variant={prepareSelection ? 'filled' : 'default'}
        styles={(theme) => ({
          root: {
            backgroundColor: !prepareSelection ? theme.colors.carbon[0] : undefined,
            borderColor: !prepareSelection ? theme.colors.carbon[4] : undefined,
            '&:hover': {
              backgroundColor: !prepareSelection ? theme.colors.carbon[0] : undefined,
              borderColor: !prepareSelection ? theme.colors.carbon[5] : undefined
            },
            '&:active': { transform: 'none' }
          },
          label: { fontWeight: 400 }
        })}
        leftSection={<IconExpand01 size={14} />}
        onClick={toggleSelection}
        data-mp-event="mp-select&zoom-1691461018302"
      >
        Select & Zoom
      </Button>
      <Button
        variant="default"
        styles={(theme) => ({
          root: {
            backgroundColor: theme.colors.carbon[0],
            borderColor: theme.colors.carbon[4],
            '&:hover': {
              backgroundColor: theme.colors.carbon[0],
              borderColor: theme.colors.carbon[5]
            }
          },
          label: { fontWeight: 400 }
        })}
        onClick={onResetSelection}
        data-mp-event="mp-reset-1691461018304"
      >
        Reset
      </Button>
    </Button.Group>
  )

  const timeRangePicker = (
    <TimeRangePicker
      loading={loading}
      value={timeRange}
      onChange={onTimeRangeChange}
      quickRanges={QUICK_RANGES}
      minDateTime={() =>
        dayjs()
          .subtract(QUICK_RANGES[QUICK_RANGES.length - 1], 'seconds')
          .toDate()
      }
      maxDateTime={() => dayjs().toDate()}
    />
  )

  const dataTagSelect = (
    <Select
      disabled={loading}
      placeholder="Kind"
      data={DATA_TAG_SELECT_OPTIONS}
      value={kind}
      onChange={(e) => {
        eventTracking(`${FEATURE_NAME} Kind Clicked`)
        onKindChange?.(e ?? '')
      }}
    />
  )

  const refreshTimer = (
    <Box ml="auto">
      <AutoRefreshButton
        autoRefreshValue={refreshInterval}
        onAutoRefreshChange={onRefreshIntervalChange}
        onRefresh={onRefresh}
        loading={loading}
      />
    </Box>
  )

  // const settingBtn = (
  //   <Tooltip label="Settings" withArrow  >
  //     <ActionIcon variant="subtle" size="xl" onClick={openSetting}>
  //       <Box component={IconSettings02} size={16} sx={(theme) => ({ color: theme.colors.carbon[8] })} />
  //     </ActionIcon>
  //   </Tooltip>
  // )

  return (
    <Flex px={24} gap="md" justify="flex-start" align="center" wrap="wrap">
      {timeRangePicker}
      {dataTagSelect}
      {brightnessSlider}
      {selectAndZoomBtns}
      {loading && <Loader size="sm" />}

      {refreshTimer}
      {/* Hide setting first, if someone request it, will add it back */}
      {/* {settingBtn} */}
    </Flex>
  )
}