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

const submitInterval = 5000;

export default class ReportPage extends Component {
  state = {
    report: '',
    isLoading: false,
    isDisable: false,
  };

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

  handleChange(report: string) {
    this.setState({
      report,
    });
  }
  onSubmit() {
    this.setState({
      isDisable: true,
    });
    if (this.state.report == '') {
      Taro.atMessage({
        message: pt.get().button.submitText.blank,
        type: 'error',
      });
      setTimeout(() => {
        this.setState({
          isDisable: false,
        });
      }, submitInterval);
      return;
    }
    reportMessage(this);
    setTimeout(() => {
      this.setState({
        isDisable: false,
      });
    }, submitInterval);
  }
  onReset() {
    this.setState({
      report: '',
    });
  }
  render(): ReactNode {
    return (
      <View style={{ marginTop: '30rpx', width: '94%', marginLeft: '3%' }}>
        <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}
          />
          <View className='at-row'>
            <View
              className='at-col'
              style={{
                marginTop: '30rpx',
                marginRight: '10rpx',
                marginLeft: '10rpx',
                width: '50%',
              }}
            >
              <AtButton formType='reset' type='secondary'>
                {pt.get().button.buttonText.reset}
              </AtButton>
            </View>
            <View
              className='at-col'
              style={{
                marginTop: '30rpx',
                marginRight: '10rpx',
                marginLeft: '10rpx',
                width: '50%',
              }}
            >
              <AtButton
                loading={this.state.isLoading}
                formType='submit'
                type='primary'
                disabled={this.state.isDisable}
              >
                {pt.get().button.buttonText.submit}
              </AtButton>
            </View>
          </View>
        </AtForm>
      </View>
    );
  }
}