import React, { useCallback, useState } from 'react'
import { View, Text, Input } from '@tarojs/components'
import { Checkbox } from '@nutui/nutui-react-taro'
import styles from './index.module.scss'
interface FormSwitchProps {
  value: boolean
  onChange: (checked: boolean) => void
  subTitle: string
  wechatId?: string
}

const FormSwitch: React.FC<FormSwitchProps> = ({ value, onChange, subTitle, wechatId }) => {
  const [editWechat, setEditWechat] = useState(false)
  const [wechatIdValue, setWechatIdValue] = useState('')
  const [wechat, setWechat] = useState(wechatId)
  const editWechatId = () => {
    setEditWechat(true)
  }
  const setWechatId = useCallback((e: any) => {
    const value = e.target.value
    onChange && onChange(value)
    setWechatIdValue(value)
  }, [onChange])

  const fillWithPhone = () => {
    if (wechat) {
      setWechatIdValue(wechat)
    }
  }

  return (
    <>
      <View className={styles['wechat-contact-section']}>
        <View className={styles['wechat-contact-item']}>
          <Checkbox 
            className={styles['wechat-contact-checkbox']}
            checked={value}
            onChange={onChange}
          />
          <View className={styles['wechat-contact-content']}>
            <Text className={styles['wechat-contact-text']}>{subTitle}</Text>
          </View>
        </View>
        {
          !editWechat && wechatId && (
            <View className={styles['wechat-contact-id']}>
              <Text className={styles['wechat-contact-text']}>微信号: {wechatId.replace(/(\d{3})(\d{4})(\d{4})/, '$1 $2 $3')}</Text>
              <View className={styles['wechat-contact-edit']} onClick={editWechatId}>修改</View>
            </View>
          )
        }
        {
          editWechat && (
            <View className={styles['wechat-contact-id']}>
              <View className={styles['wechat-contact-edit-input']}>
                <Input value={wechatIdValue} onInput={setWechatId} placeholder='请输入正确微信号' />
              </View>
              <View className={styles['wechat-contact-edit']} onClick={fillWithPhone}>手机号填入：{wechat}</View>
            </View>
          )
        }
        
      </View>
    </>
  )
}

export default FormSwitch