import React from 'react'
import classnames from 'classnames'

import Dialog, { Props as DialogProps } from './Dialog'
import Button from '../Button'
import { useColors, useLangData, usePrefix } from '../ConfigProvider'
import { CheckCircleIcon, CloseCircleIcon, InfoIcon, TipIcon } from '../icons'
import { useFooterCtx } from '../Modal/Footer'

export type StatusDialogProps = Omit<DialogProps, 'onCancel' | 'maskClickable' | 'keyboard'>

function StatusFooter() {
  const langData = useLangData('modal')
  const { onOk } = useFooterCtx()
  return <Button type="primary" onClick={onOk}>{langData.okText}</Button>
}

function StatusDialog(props: StatusDialogProps) {
  const { className, footer = <StatusFooter />, ...rest } = props
  const prefix = usePrefix('dialog-status')
  return (
    <Dialog
      className={classnames(className, prefix)}
      footer={footer}
      maskClickable={false}
      keyboard={false}
      {...rest}
    />
  )
}

export function InfoDialog(props: StatusDialogProps) {
  const { blue6 } = useColors()
  return (
    <StatusDialog
      icon={<InfoIcon style={{ color: blue6 }} />}
      {...props}
    />
  )
}

export function SuccessDialog(props: StatusDialogProps) {
  const { green6 } = useColors()
  return (
    <StatusDialog
      icon={<CheckCircleIcon style={{ color: green6 }} />}
      {...props}
    />
  )
}

export function WarningDialog(props: StatusDialogProps) {
  const { orange6 } = useColors()
  return (
    <StatusDialog
      icon={<TipIcon style={{ color: orange6 }} />}
      {...props}
    />
  )
}

export function ErrorDialog(props: StatusDialogProps) {
  const { red6 } = useColors()
  return (
    <StatusDialog
      icon={<CloseCircleIcon style={{ color: red6 }} />}
      {...props}
    />
  )
}