import React, { useEffect } from 'react'
import { View, Text, Input, Image } from '@tarojs/components'
import Taro, { getCurrentInstance, useDidShow } from '@tarojs/taro'
import { SpPage, SpHtml, SpCheckbox } from '@/components'
import { useSelector } from 'react-redux'
import { getActiveDetail } from '@/api/community'
import { useImmer } from 'use-immer'
import api from '@/api'
import dayjs from 'dayjs'
import { AtIcon } from 'taro-ui'
import { classNames, navigateTo } from '@/utils'
import './detail.scss'

const initState = {
  activeInfo: {},
  isLoading: true,
  visible: false,
  checked: false,
  formInfo: {},
  status: ''
}
export default function detail () {
  const $instance = getCurrentInstance()
  const [state, setState] = useImmer(initState)
  const { appName } = useSelector((_state) => _state.sys)
  const { userInfo = {} } = useSelector((_state) => _state.user)

  useDidShow(() => {
    getActiveDetail()
  }, [])

  useEffect(() => {
    setState(draft => {
      draft.formInfo = {
        username: userInfo.username,
        mobile: userInfo.mobile,
      }
    })
  }, [userInfo])

  const getActiveDetail = async () => {
    const { id: activity_id } = $instance.router.params
    if (!activity_id) return
    const { status, activity_info = {}, total_count, user_code } = await api.user.registrationActivity({ activity_id })
    const _start = dayjs(activity_info.start_time * 1000)
    const _end = dayjs(activity_info.end_time * 1000)
    setState(draft => {
      draft.isLoading = false,
        draft.activeInfo = {
          ...activity_info,
          user_code,
          total_count,
          start: `${_start.month() + 1}月${_start.date()}日`,
          end: `${_end.month() + 1}月${_end.date()}日`,
          status,
          isLoading: false
        }
    })
  }

  const { isLoading, activeInfo = {}, visible, formInfo, checked, status } = state

  const renderFooter = () => {
    if (isLoading || status === 'passed') {
      return null
    }
    return <View className={"bottom"}>
      <View className='check-box'>
        <SpCheckbox checked={checked} colors="#000" onChange={() => setState((draft) => { draft.checked = !checked })} />
        <View>
          <Text onClick={() => setState((draft) => { draft.checked = !checked })} >我已经阅读并同意</Text>
          <Text
            onClick={() => Taro.navigateTo({ url: '/subpages/auth/reg-rule?type=member_logout' })}
            style={`color: #000000;text-decoration: underline;`}
          >
            {`《${appName}活动细则》`}
          </Text>
        </View>
      </View>
      <View onClick={async () => {
        if (!checked) {
          const res = await Taro.showModal({
            title: '提示',
            content: `请先阅读并同意${appName}活动细则`,
            showCancel: true,
            cancel: '取消',
            cancelText: '拒绝',
            confirmText: '同意',
            cancelColor: '#a5a5a5',
            confirmColor: '#000'
          })
          if (!res.confirm) return
          setState((draft) => {
            draft.checked = true
            draft.visible = true
          })
        }
        setState((draft) => {
          draft.visible = true
        })
      }} className={"btn"}>{!status ? '确认报名' : status === 'pending' ? '报名中' : '已报名'}</View>
    </View>
  }

  const onIptChange = (e, name) => {
    const { value } = e.detail
    setState((draft) => {
      draft.formInfo[name] = value
    })
  }

  const handleSubmit = async () => {
    if (!formInfo.username?.trim()) {
      Taro.showToast({
        title: '请输入姓名',
        icon: 'none'
      })
      return
    }
    if (!formInfo.mobile?.trim()) {
      Taro.showToast({
        title: '请输入手机号',
        icon: 'none'
      })
      return
    }
    const content = {
      title: '',
      sort: 1,
      formdata: formItem.map((d) => {
        return {
          ...d,
          answer: formInfo[d.field_name]
        }
      })
    }
    const { status } = await api.user.registrationSubmit({
      formdata: { content: JSON.stringify([content]) },
      activity_id: activeInfo.activity_id
    })
    if (status) {
      // Taro.showToast({
      //   title: '报名成功',
      //   icon: 'none'
      // })
      setState((draft) => {
        draft.visible = false
        draft.status = status
      })
      Taro.requestSubscribeMessage({
        tmplIds: ['tGJR7BS3HM9xLD4QUdBwtTAJkgzfl7cw_8-ngd74JM4'],
        success: () => {
          // onSubscribe()
          console.log("🚀 ~ onSubscribe:", 'onSubscribe')
        },
        fail: (err) => {
          console.log("🚀 ~ err:", err)
          // onSubscribe()
        },
        complete: () => {
          Taro.navigateTo({ url: '/pages/recommend/status?success=true&id=' + activeInfo.activity_id })
        }
      })
    }
  }

  const formItem = activeInfo.formdata?.key_index || []
  return (
    <SpPage renderFooter={!!activeInfo?.total_count ? <></> : renderFooter()} loading={isLoading} className='page-recommend-detail' isBlack>
      <View className="activity_name">{activeInfo.activity_name}</View>
      <View className="activity_time">{activeInfo.start} - {activeInfo.end}</View>
      <View className="activity_addr">
        <Image mode="widthFix" src={require('@/assets/icon/map.png')}></Image>
        <Text>{activeInfo.address}</Text>
      </View>
      <SpHtml content={activeInfo.intro} />
      <View className="sp-picker">
        <View
          className={classNames('mask', {
            visible: visible
          })}
          onTap={() => setState((draft) => {
            draft.visible = false
          })}
          catchtouchmove
        ></View>
        <View
          className={classNames('sp-picker-cnt', {
            visible: visible
          })}
        >
          <View className={classNames('sp-picker-hd')} catchtouchmove>
            <Text className='center'>{'报名信息'}</Text>
            <AtIcon onClick={() => setState((draft) => {
              draft.visible = false
            })} value='close' size={14} color='#000' ></AtIcon>
          </View>
          <View className='sp-picker-bd'>
            {formItem.map((item, index) => (
              <View className="user-form-item" key={`userinfo-item__${index}`}>
                <View className="user-form-item-title">{item.field_title}</View>
                <View className="user-form-item-input">
                  {item.form_element === 'text' ? <Input
                    name={item.field_name}
                    value={formInfo[item.field_name]}
                    class='input-field-1'
                    placeholder={`请输入`}
                    onInput={(e) => onIptChange(e, item.field_name)}
                  /> : null}
                </View>
              </View>
            ))}
            <View onClick={handleSubmit} className={"btn"}>确认报名信息</View>
          </View>
        </View>
      </View>

    </SpPage>
  )
}