import { ComponentClass } from 'react';
import Taro, { Component } from '@tarojs/taro';
import { View } from '@tarojs/components';

import './ToastBox.scss';

type PageOwnProps = {};
type PageState = {
  text: string;
  visiable: boolean;
  timer: number | undefined;
};

interface ToastBox {
  props: PageOwnProps;
  state: PageState;
}

class ToastBox extends Component {
  constructor(props: PageOwnProps) {
    super(props);
    this.state = {
      text: '提示',
      visiable: false,
      timer: undefined,
    };
  }

  showToast(newText: string) {
    const { timer } = this.state;
    if (timer) {
      clearTimeout(timer);
    }
    setTimeout(() => {
      this.setState({
        visiable: false,
      });
    }, 3000);
    this.setState({
      text: newText,
      visiable: true,
    });
  }
  render() {
    const { text, visiable } = this.state;
    return <View className={`ToastBox ${visiable ? 'show' : ''}`}>{text}</View>;
  }
}

export default ToastBox as ComponentClass<PageOwnProps, PageState>;
