import { AtTextarea, AtButton, AtForm, AtMessage } from 'taro-ui';
import { Component, ReactNode } from 'react';
import { getUrl } from '@/service';
import Taro from '@tarojs/taro';
import pt from '@/plain-text';
import './report.scss';

const submitInterval = 5000;

export default class SettingsPage extends Component {
  state = {
    report: '',
    isLoading: false,
    isDisable: false,
  };
  handleChange(report: string) {
    this.setState({
      report,
    });
  }
  onSubmit() {
    this.setState({
      isLoading: true,
      isDisable: true,
    });
    console.log(this.state.report);
    Taro.request({
      url: getUrl('/report'),
      method: 'POST',
      data: {
        token: 'token_test',
        report: this.state.report,
      },
    })
      .then(res => {
        console.log(res.data);
        Taro.atMessage({
          message: pt.get().button.submitText.success,
          type: 'success',
        });
      })
      .catch(err => {
        console.log(err);
        Taro.atMessage({
          message: pt.get().button.submitText.error + err.toString(),
          type: 'error',
        });
      });
    this.setState({
      isLoading: false,
    });
    setTimeout(() => {
      this.setState({
        isDisable: false,
      });
    }, submitInterval);
  }
  onReset() {
    this.setState({
      report: '',
    });
  }
  render(): ReactNode {
    return (
      <AtForm
        onSubmit={this.onSubmit.bind(this)}
        onReset={this.onReset.bind(this)}
      >
        <AtMessage />
        <AtTextarea
          value={this.state.report}
          onChange={this.handleChange.bind(this)}
          maxLength={200}
          placeholder={pt.get().reportPage.placeHolderText}
        />
        <AtButton
          loading={this.state.isLoading}
          formType='submit'
          type='primary'
          disabled={this.state.isDisable}
        >
          {pt.get().button.buttonText.submit}
        </AtButton>
        <AtButton formType='reset' type='secondary'>
          {pt.get().button.buttonText.reset}
        </AtButton>
      </AtForm>
    );
  }
}