import React from 'react';
import { Text, View, Textarea } from '@tarojs/components';
import classNames from 'classnames';
import { CompDefault, MetaProps } from '../data-channel';
import connect from '../connect';

export interface Props extends MetaProps {
  // 标签
  label?: string;
  // 是否必填
  require?: boolean;
  // 数据输出回调
  onChange?: (value: any) => void;
}

/**
 * 表单项状态类型
 */
export interface State {}

/**
 * 表单项-文本框
 */
const defaultValue: CompDefault<Props, State> = {
  props: {
    label: '',
    require: false,
    onChange: (_value) => {},
  },
  state: {},
  meta: {
    compName: 'inline',
    output: { tags: ['form-item'] },
    __mergeCb: (props, meta) => {
      meta.output.key = props.formKey;
    },
  },
};

/**
 * 表单项
 */
const FormTextarea: React.FC<Props> = ({ label, onChange, meta }) => {
  return (
    <View className='wm-tpl-form-item'>
      <View className={classNames('area-box', 'textarea-box')}>
        <Text className='label'>{label}</Text>
        <Textarea
          autoHeight
          className='textarea'
          placeholder={'请输入' + label}
          placeholderClass='textarea-placeholder'
          onInput={(value) => {
            onChange({
              value: value,
              meta: meta?.output,
            });
          }}
        />
      </View>
    </View>
  );
};

export default connect(FormTextarea, defaultValue);