import { Typography } from '@tidbcloud/uikit'
import { FormCheckbox } from '@tidbcloud/uikit/biz'
import { useLocalStorage } from '@tidbcloud/uikit/hooks'

export interface UIModeFormData {
  hideForAWeek: boolean
}

export const useDismissNotice = () => {
  const key = 'nextgen:ui-mode-dismiss-notice'

  const isVisible = (value: string | undefined) => {
    if (!value) {
      return true
    }

    // 7 days
    return Date.now() - Number.parseInt(value) > 7 * 24 * 60 * 60 * 1000
  }

  const [visible, setVisible] = useLocalStorage<boolean>({
    key,
    defaultValue: isVisible(localStorage.getItem(key) || undefined),
    serialize(value) {
      if (!value) {
        return Date.now().toString()
      }
      return ''
    },
    deserialize(value) {
      return isVisible(value)
    }
  })

  return {
    visible,
    setVisible
  }
}

export const DismissNotice = () => {
  const { visible } = useDismissNotice()

  if (!visible) {
    return null
  }

  return (
    <FormCheckbox
      mt={16}
      size="xs"
      styles={{ body: { alignItems: 'center' } }}
      label={<Typography c="carbon.7">Don't show this for a week</Typography>}
      name="hideForAWeek"
    />
  )
}