import React, { useState } from 'react'
import { View, Text } 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 }) => {

  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>
        {
          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']}>修改</View>
            </View>
          )
        }
        
      </View>
    </>
  )
}

export default FormSwitch