import Taro, { Component } from '@tarojs/taro'
import { postFormId } from '@services/card'

/**
 * 微信小程序 FormId 收集器。
 *
 * @example
 *
 * ```jsx
 * <MFormIdCollector
 *   count={5}
 *   onCollect={formIds => console.log(formIds)}>
 *   <View>任意内容</View>
 * </MFormIdCollector>
 * ```
 */
export default class Index extends Component {
  static options = {
    addGlobalClass: true,
  };
  
  static defaultProps = {
    count: 7,
    disabled: false,
    onCollect: function () { }
  }

  state = {
    formIds: []
  }

  handleCollect = e => {
    // 发送到服务器
    postFormId({ formids: [e.detail.formId] })
  }

  render() {
    const { disabled } = this.props

    return disabled ? this.props.children : (
      <Block>
        <Label for='button_0'>
          {this.props.children}
        </Label>
        <Form
          className='m-form-id-collector_form'
          reportSubmit={true}
          onSubmit={this.handleCollect}>
          <Button
            id={`button_0`}
            formType='submit'
          />
        </Form>
      </Block>
    )
  }
}
