import React from 'react'

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

type ModalProps = {
  onOk?: () => void
  onCancel?: () => void
  renderIcon?: () => React.ReactNode
  renderSubtitle?: () => React.ReactNode
  subTitle?: string
  title?: string
  okText?: string
  cancelText?: string
}

/**
 *
 * 全局 modal 组件
 * @export
 * @param {ModalProps} { onOk, onCancel, renderIcon, subTitle, title, renderSubtitle, okText = '确定', cancelText = '取消' }
 * @return {*}
 */

export default function Modal({
  onOk,
  onCancel,
  renderIcon,
  subTitle,
  title,
  renderSubtitle,
  okText = '确定',
  cancelText = '取消',
}: ModalProps) {
  const handleConfirm = () => {
    onOk?.()
  }

  const handleCancel = () => {
    onCancel?.()
  }

  return (
    <Block className="mx-[60px] mt-[-60px] items-center rounded-[20px] bg-primary p-[12px]">
      <Block className="center mt-[12px] px-[16px]">
        {renderIcon?.()}

        {!!title && <Text className="text-center text-[15px] font-bold text-fg">{title}</Text>}
        {!!subTitle && (
          <Block className="mt-[6px]">
            <Text className="text-center text-[13px] text-[#8A8A8A]">{subTitle}</Text>
          </Block>
        )}
        {renderSubtitle?.()}
      </Block>
      <Block className="mt-[20px] w-full flex-row gap-x-[12px]">
        <Block className="flex-1">
          <Block className="items-center justify-center rounded-[8px] bg-[#333538] py-[12px]" onClick={handleCancel}>
            <Text className="text-[13px] text-grayx">{cancelText}</Text>
          </Block>
        </Block>
        <Block className="flex-1">
          <Block className="items-center justify-center rounded-[8px] bg-[#FA3F2C] py-[12px]" onClick={handleConfirm}>
            <Text className="text-[13px] text-grayx">{okText}</Text>
          </Block>
        </Block>
      </Block>
    </Block>
  )
}