import { Component, ReactNode } from 'react';
import { AtForm, AtInput, AtButton, AtMessage } from 'taro-ui';
import { View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import pt from '@/plain-text';
import { updateUserInfo } from '@/service/userData';
import './inform.scss';

const submitInterval = 5000;

export default class InformPage extends Component {
  state = {
    phone: '',
    name: '',
    isLoading: false,
    isDisable: false,
  };

  componentDidMount(): void {
    Taro.setNavigationBarTitle({
      title: pt.get().navBar.user.inform,
    });
  }

  handleChangePhone(phone: string) {
    this.setState({
      phone: phone,
    });
    return phone;
  }
  handleChangeName(name: string) {
    this.setState({
      name: name,
    });
    return name;
  }
  onSubmit() {
    this.setState({
      isDisable: true,
    });
    console.log(this.state.name, this.state.phone);
    if (this.state.name == '' || this.state.phone == '') {
      Taro.atMessage({
        message: pt.get().button.submitText.blank,
        type: 'error',
      });
      setTimeout(() => {
        this.setState({
          isDisable: false,
        });
      }, submitInterval);
      return;
    }
    updateUserInfo(this);
    setTimeout(() => {
      this.setState({
        isDisable: false,
      });
    }, submitInterval);
  }

  render(): ReactNode {
    return (
      <View>
        <AtForm onSubmit={this.onSubmit.bind(this)}>
          <AtMessage />
          <AtInput
            clear
            required
            name='phone'
            title={pt.get().informPage.phoneText.title}
            type='number'
            placeholder={pt.get().informPage.phoneText.placeholder}
            value={this.state.phone}
            onChange={this.handleChangePhone.bind(this)}
          />
          <AtInput
            required
            clear
            name='name'
            title={pt.get().informPage.nameText.title}
            type='text'
            placeholder={pt.get().informPage.nameText.placeholder}
            value={this.state.name}
            onChange={this.handleChangeName.bind(this)}
          />
          <AtButton
            loading={this.state.isLoading}
            formType='submit'
            type='primary'
            disabled={this.state.isDisable}
          >
            {pt.get().button.buttonText.submit}
          </AtButton>
        </AtForm>
      </View>
    );
  }
}