import { Box, Button, Group, Tooltip, Typography } from '@tidbcloud/uikit'
import { Dot } from '@tidbcloud/uikit/biz'
import { IconChevronDown } from '@tidbcloud/uikit/icons'
import clsx from 'clsx'
import { capitalize } from 'lodash-es'
import { useMemo, useState } from 'react'

import { DataMigrationPrecheckItemColorMap as StatusColorMap } from 'dbaas/features/DataMigration'

import classes from './CheckItem.module.css'

export interface CheckItemProps {
  desc?: string
  status: 'success' | 'warn' | 'fail'
  solution?: string
  reason?: string
  solution_doc_url?: string
  type?: string
  onIgnore?: (s: string) => void
}

const CheckItem = ({ status = 'warn', solution, desc, reason, onIgnore, solution_doc_url }: CheckItemProps) => {
  const [open, setOpen] = useState(status === 'success' ? false : true)
  const [ignored, setIgnored] = useState(false)

  const solutionText = useMemo(() => {
    if (!solution) return '-'
    if (solution_doc_url) {
      return solution + ` <a href="${solution_doc_url}" target="_blank" rel="noopener noreferrer">Learn more</a>.`
    }
    return solution
  }, [solution, solution_doc_url])

  return (
    <div className="wd-overflow-hidden">
      <div className="wd-w-full wd-flex wd-items-center">
        <div className="wd-flex-1 wd-p-4">{desc}</div>

        <div className="wd-flex-1 wd-p-4 wd-flex wd-justify-between">
          <Group>
            <Group gap={8}>
              <Dot color={StatusColorMap[status!]} />
              <span>{capitalize(status)}</span>
            </Group>

            {status === 'warn' &&
              (ignored ? (
                <Typography c="carbon.5" lh="40px">
                  Ignored
                </Typography>
              ) : (
                <Tooltip label={'Ignoring warnings may risk task failures, data inconsistencies, etc.'}>
                  <Button
                    variant="subtle"
                    c="dark"
                    onClick={() => {
                      setIgnored(true)
                      onIgnore?.(desc!)
                    }}
                  >
                    Ignore
                  </Button>
                </Tooltip>
              ))}
          </Group>

          {status !== 'success' && (
            <div onClick={() => setOpen((prev) => !prev)} className="wd-cursor-pointer">
              <Box
                component={IconChevronDown}
                className={clsx('wd-transform wd-transition-transform', open ? '' : 'wd-rotate-90')}
              />
            </div>
          )}
        </div>
      </div>

      {status !== 'success' && (
        <Box
          className={clsx(classes.message, open && classes.open)}
          sx={(theme) => ({ backgroundColor: theme.colors.carbon[2] })}
        >
          <div className="wd-mb-2">
            <b>Reason:</b> <span dangerouslySetInnerHTML={{ __html: reason || '-' }} />
          </div>
          <div>
            <b>Solution:</b> <span dangerouslySetInnerHTML={{ __html: solutionText || '-' }} />
          </div>
        </Box>
      )}
    </div>
  )
}

export default CheckItem