import type { CommonEventFunction, InputProps } from '@tarojs/components'
import { Input, Text, View } from '@tarojs/components'
import React, { useMemo, useState } from 'react'
import classNames from 'classnames'
import Dialog from '../Dialog'
import IconFont from '../iconfont/iconfont'
import NormalButton from '../normalButton'
import styles from './index.module.scss'

interface PropsType {
  showModal: boolean
  onClose?: () => void
  onShowModalChange?: (val: boolean) => void
  onCancel?: () => void
  onConfirm?: (val: string) => void
}
const OrganizationNameModal = (props: PropsType) => {
  const {
    showModal = false,
    onClose,
    onShowModalChange,
    onCancel,
    onConfirm,
  } = props

  const handleClose = () => {
    onClose?.()
  }

  const [text, setText] = useState<string>('')

  const handleCancel = () => {
    onCancel?.()
    handleClose()
  }
  const handleConfirm = () => {
    onConfirm?.(text)
  }
  const [inputStyles, setInputStyles] = useState<string[]>([])
  const [tipsComp, setTipsComp] = useState<React.ReactNode | null>(null)

  const isInvalidate = useMemo(() => {
    let flag = false
    const Reg = /^[a-zA-Z0-9\u4E00-\u9FA5]+$/
    console.log('text', text)
    setTipsComp(null)
    setInputStyles(() => [styles.inputBar_focus])
    if (!text) {
      flag = true
    }
    if (text && !Reg.test(text)) {
      flag = true
      setInputStyles(() => [styles.inputBar_error])
      setTipsComp(() => {
        return <View className={styles.error_tips}>
          只允许输入数字、英文、中文；不允许输入任何其他符号
        </View>
      })
    }
    return flag
  }, [text])

  const handleIntput: CommonEventFunction<InputProps.inputEventDetail> = (e) => {
    setText(e.detail.value)
  }
  const handleFocus = () => {
    if (isInvalidate) {
      setInputStyles(() => [styles.inputBar_error])
      return
    }
    setInputStyles(() => [styles.inputBar_focus])
  }
  const handleBlur = () => {
    if (isInvalidate) {
      setInputStyles(() => [styles.inputBar_error])
      return
    }
    setInputStyles(() => [])
  }

  return <Dialog show={showModal} customStyles={{ zIndex: '9999' }} onClose={handleClose} onChange={onShowModalChange}>
    <View className={styles.organizationNameModal}>
      <View className={styles.organizationNameModal_title}>请设置您的组织昵称</View>
      <View className={styles.organizationNameModal_content}>
        <View className={styles.tips}>
          <IconFont name="icon-tips" customStyle={{ marginRight: '8rpx', flexShrink: '0' }} size={36} color="#f79b31"></IconFont>
          <Text>公司名称是辨识您身份的重要依据，请谨慎修改。（仅支持修改一次）</Text>
        </View>
        <Input className={classNames(styles.inputBar, [...inputStyles])} onFocus={handleFocus} onBlur={handleBlur} onInput={handleIntput} value={text} type="text" placeholder="请输入 组织/公司/码单昵称" />
        {tipsComp}
      </View>
      <View className={styles.organizationNameModal_bottomBar}>
        <NormalButton type="info" customClassName={classNames(styles.button, styles.organizationNameModal_bottomBar_left)} onClick={handleCancel}>下次更改</NormalButton>
        <NormalButton type="primary" disabled={isInvalidate} customClassName={classNames(styles.button, styles.organizationNameModal_bottomBar_right)} onClick={handleConfirm}>确认</NormalButton>
      </View>
    </View>
  </Dialog>
}
export default OrganizationNameModal
