import Taro, { Component } from '@tarojs/taro';
import { View, Textarea } from '@tarojs/components';
import { TextareaProps } from '@tarojs/components/types/Textarea';

import './index.scss';

interface IProps extends TextareaProps {
  behind?: boolean,
  value: string,
  placeholder?: string,
  maxlength?: number,
  disabled?: boolean,
  onInput: () => void,
}

interface IState {
  contentInput: string,
}


class TctTextarea extends Component<IProps, IState> {
  static defaultProperty = {
    behind: false,
  }

  constructor(props) {
    super(props);
    this.state = {
      contentInput: '',
    };
  }

  componentWillMount() {}

  render() {
    const {
      behind,
      value,
      placeholder,
      maxlength,
      disabled,
      onBlur,
      onInput,
    } = this.props;
    const { contentInput } = this.state;

    return (
      <View className="textarea-box">
        <Textarea
          // eslint-disable-next-line taro/no-spread-in-props
          style={behind ? 'display: none;' : 'display: auto;'}
          value={value || contentInput}
          maxlength={maxlength || 200}
          placeholder={placeholder}
          disabled={disabled}
          onInput={onInput}
        />
        <View
          style={!behind ? 'visibility:hidden' : 'visibility:visible'}
          className="textarea-box-fake"
        >{value}
        </View>
        <View
          className="textarea-box-maxVal"
        >{value.length}/{maxlength || 200}</View>
      </View>
    );
  }
}

export default TctTextarea;