import { Ionicons } from '@expo/vector-icons'
import React, { type ReactNode } from 'react'

import Block from './Block'
import Text from './Text'
import Toast from './Toast'

interface ConfirmModalProps {
  /** 标题，默认为 "确认支付?" */
  title?: string
  /** 徽标文字，默认为 "SYSTEM_MSG" */
  badge?: string
  /** 内容，可以是字符串或React节点 */
  content?: ReactNode
  /** 确认按钮文字，默认为 "确认" */
  confirmText?: string
  /** 取消按钮文字，默认为 "取消" */
  cancelText?: string
  /** 确认回调 */
  onConfirm?: () => void
  /** 取消回调，如果不传则默认关闭Modal */
  onCancel?: () => void
}

const ConfirmModal: React.FC<ConfirmModalProps> = ({
  title = '确认支付?',
  badge = 'SYSTEM_MSG',
  content,
  confirmText = '确认',
  cancelText = '取消',
  onConfirm,
  onCancel,
}) => {
  const handleCancel = () => {
    if (onCancel) {
      onCancel()
    } else {
      Toast.hideModal()
    }
  }

  const handleConfirm = () => {
    onConfirm && onConfirm()
  }

  return (
    <Block className="fixed inset-0 z-[60] items-center justify-center p-[24px]">
      <Block className="relative w-full max-w-[320px] -skew-x-3 border-4 border-black bg-white p-[24px] shadow-[10px_10px_0px_#e61e25]">
        <Block className="absolute left-[-12px] top-[-12px] skew-x-3 border-[3px] border-black bg-accent px-[8px] py-[4px] shadow-[2px_2px_0px_rgba(0,0,0,0.2)]">
          <Text className="text-[12px] font-black tracking-wider">{badge}</Text>
        </Block>

        <Text className="mb-[8px] mt-[4px] text-[24px] font-black tracking-tight text-black">{title}</Text>
        <Block className="mb-[20px] h-[4px] w-full bg-black" />

        <Block className="mb-[24px]">
          {typeof content === 'string' ? (
            <Text className="text-[14px] font-bold leading-relaxed text-gray-800">{content}</Text>
          ) : (
            content
          )}
        </Block>

        <Block className="w-full flex-row gap-x-[12px]">
          <Block className="flex flex-1 border-[3px] border-black py-[12px]" onClick={handleCancel}>
            <Text className="text-center text-black">{cancelText}</Text>
          </Block>

          <Block
            className="flex flex-1 flex-row items-center justify-center border-[3px] border-black bg-accent py-[12px] shadow-[4px_4px_0px_#000]"
            onClick={handleConfirm}
          >
            <Text className="text-black">{confirmText}</Text>
            <Ionicons color="#000" name="flash" size={16} style={{ marginLeft: 4 }} />
          </Block>
        </Block>
      </Block>
    </Block>
  )
}

export default ConfirmModal