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

import { useSQLEditorContext } from '../context/editor-context'
import { getEditorSaveState } from '../sql-code-editor/editor-auto-save-cache'
import { AutoSaveStateEnum } from '../types'

export const AutoSaveState = observer(() => {
  const { autoSaveState, editedSqlFile } = useSQLEditorContext()

  const result = useMemo(() => {
    const state = getEditorSaveState(editedSqlFile?.id) || { state: AutoSaveStateEnum.Saved }

    let word, icon
    switch (state?.state) {
      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 = (
          <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">{state.errorMsg}</Typography>
            </HoverCard.Dropdown>
          </HoverCard>
        )
        break
    }

    return (
      <Group gap={4} w={90}>
        {word}
        {icon}
      </Group>
    )
  }, [autoSaveState, editedSqlFile?.id])

  return result
})