import { ActionIcon, Box, Flex, Menu, Typography } from '@tidbcloud/uikit'
import { MRT_ColumnDef, ProTable, Dot } from '@tidbcloud/uikit/biz'
import { IconCalendar, IconCollapse08, IconDotsHorizontal, IconExpand08 } from '@tidbcloud/uikit/icons'
import { observer } from 'mobx-react'
import { useCallback } from 'react'

import { HeroComponent } from 'dbaas/components/Measurement'
import TimeComponent from 'dbaas/components/TimeComponent'
import { useAccessCheck } from 'dbaas/contexts/access-control'
import {
  Dedicatedv1beta1MaintenanceTask,
  Dedicatedv1beta1MaintenanceTaskState
} from 'dbaas/services/api-clients/v2023/dedicated/v1beta1/interface'
import useStores from 'dbaas/stores/useStores'

import { maintenanceWindoAccesswKey } from './const'
import { useMaintenanceWindowContext } from './context'

type MaintenanceTaskColumn = Dedicatedv1beta1MaintenanceTask & { expanded: boolean }

export const TaskList: React.FC<React.PropsWithChildren<unknown>> = observer(() => {
  const actionAccessible = useAccessCheck(maintenanceWindoAccesswKey)

  const {
    setDeferModalOpened,
    tableLoading,
    setTaskData,
    taskList,
    setTaskList,
    loaded,
    taskListParams,
    setTaskListParams
  } = useMaintenanceWindowContext()

  const {
    store: { tenantData }
  } = useStores()

  const transferMaintenanceStatus = (status: string) => {
    switch (status) {
      case Dedicatedv1beta1MaintenanceTaskState.PENDING:
        return (
          <Flex align="center" gap={8}>
            <Dot color="gray" />
            Scheduled
          </Flex>
        )
      case Dedicatedv1beta1MaintenanceTaskState.RUNNING:
        return (
          <Flex align="center" gap={8}>
            <Dot color="blue" />
            In Progress
          </Flex>
        )
      default:
        return status
    }
  }

  const getRescheduleDisabled = useCallback((data: Dedicatedv1beta1MaintenanceTask) => {
    return (
      data.state === Dedicatedv1beta1MaintenanceTaskState.RUNNING ||
      data.state === Dedicatedv1beta1MaintenanceTaskState.DONE
    )
  }, [])

  const columns: MRT_ColumnDef<MaintenanceTaskColumn>[] = [
    {
      header: 'Description',
      accessorFn: (v) => (
        <Flex align="center" w={420} justify="space-between">
          <Typography
            variant="body-lg"
            maw={380}
            sx={() =>
              v.expanded
                ? {}
                : {
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                    whiteSpace: 'nowrap'
                  }
            }
          >
            {v.description}
          </Typography>
          <Box
            size={16}
            sx={(t) => ({ cursor: 'pointer', ':hover': { color: t.colors.peacock[7] } })}
            component={v.expanded ? IconCollapse08 : IconExpand08}
            onClick={() => {
              v.expanded = !v.expanded
              setTaskList([...taskList])
            }}
          />
        </Flex>
      )
    },
    { header: 'Status', size: 100, accessorFn: (v) => v.state && transferMaintenanceStatus(v.state) },
    {
      header: 'Scheduled Start Time',
      size: 260,
      accessorFn: (v) => (
        <TimeComponent
          time={v.scheduledApplyTime ?? ''}
          format="YYYY-MM-DD HH:mm:ss Z"
          utcOffset={tenantData.timezone}
        />
      )
    },
    {
      header: 'Deadline',
      size: 260,
      accessorFn: (v) => (
        <TimeComponent time={v.deadline ?? ''} format="YYYY-MM-DD HH:mm:ss Z" utcOffset={tenantData.timezone} />
      )
    },
    {
      header: 'Action',
      size: 80,
      accessorFn: (v) => (
        <Menu position="bottom-end" offset={4}>
          <Menu.Target>
            <ActionIcon variant="subtle">
              <IconDotsHorizontal size={14} />
            </ActionIcon>
          </Menu.Target>
          <Menu.Dropdown>
            <Menu.Item
              disabled={!actionAccessible || getRescheduleDisabled(v)}
              data-mp-event="maintenance reschedule button clicked"
              onClick={() => {
                setDeferModalOpened(true)
                setTaskData(v)
              }}
            >
              <Flex align="center" gap={8}>
                <IconCalendar size={16} />
                Reschedule
              </Flex>
            </Menu.Item>
          </Menu.Dropdown>
        </Menu>
      )
    }
  ]

  return (
    <>
      <ProTable<MaintenanceTaskColumn>
        columns={columns}
        data={taskList as MaintenanceTaskColumn[]}
        loading={tableLoading}
        emptyMessage="No Data"
        mantinePaperProps={{ mx: 24 }}
        pagination={
          taskListParams?.total
            ? {
                value: taskListParams.page + 1,
                total: taskListParams.total,
                onChange: (p) => setTaskListParams((prev) => ({ ...prev, page: p - 1 })),
                position: 'center'
              }
            : undefined
        }
      ></ProTable>
      {loaded && <HeroComponent />}
    </>
  )
})