import { Box, Group, Typography } from '@tidbcloud/uikit'
import { IconCheck, IconXCircle } from '@tidbcloud/uikit/icons'
import { observer } from 'mobx-react'
import { useMemo } from 'react'

import { AutoSaveStateEnum, useDataApiContext } from '../context'

export const AutoSaveState = observer(() => {
  const { autoSaveState, autoSaveErrorMsg } = useDataApiContext()

  const result = useMemo(() => {
    let word, icon
    switch (autoSaveState) {
      case AutoSaveStateEnum.Saving:
        word = (
          <Typography variant="body-sm" c="carbon.6">
            Auto Saving ...
          </Typography>
        )
        break
      case AutoSaveStateEnum.Saved:
        word = (
          <Typography variant="body-sm" c="carbon.6">
            Auto Saved
          </Typography>
        )
        icon = <Box component={IconCheck} size={12} sx={(theme) => ({ path: { stroke: theme.colors.carbon[6] } })} />
        break
      case AutoSaveStateEnum.Failed:
        word = (
          <Typography variant="body-sm" c="red.7">
            Save failed
          </Typography>
        )
        icon = (
          <Box component={IconXCircle} size={12} sx={(theme) => ({ path: { stroke: theme.colors.red[7] } })} />
          // <HoverCard withArrow width={400}>
          //   <HoverCard.Target>
          //     <Box
          //       component={IconInfoCircle}
          //       size={12}
          //       sx={(theme) => ({ path: { stroke: theme.colors.red[7] }, cursor: 'pointer' })}
          //     />
          //   </HoverCard.Target>
          //   <HoverCard.Dropdown>
          //     <Typography variant="label-sm">{autoSaveErrorMsg}</Typography>
          //   </HoverCard.Dropdown>
          // </HoverCard>
        )
        break
    }
    return (
      <Group gap={4} w={90}>
        {word}
        {icon}
      </Group>
    )
  }, [autoSaveState, autoSaveErrorMsg])

  return result
})