import {Input} from 'antd';
import {FC} from 'react';
import {Controller, UseControllerProps} from 'react-hook-form';
import Label from './Label';
import ModalFiledErrorTip from './ErrorTip';

type Props = {
  label: string;
  height: number;
  required?: boolean;
  placeholder?: string;
} & UseControllerProps<any, any>;

const LDModalArea: FC<Props> = function({
  control,
  name,
  label,
  placeholder,
  required,
  height,
}) {
  return (
    <div className="ld-modal-field">
      <Label required={required} name={name}>
        {label}
      </Label>
      <div className="ld-modal-field-wrapper">
        <Controller
          name={name}
          control={control}
          render={function({
            field: {value, onChange, ref},
            formState: {errors},
          }) {
            const errorTips = errors[name]?.message?.toString() ?? '';
            return (
              <>
                <Input.TextArea
                  name={name}
                  placeholder={placeholder ?? `请输入${label}`}
                  data-testid={`field_${name}`}
                  id={`field_${name}`}
                  value={value}
                  onChange={onChange}
                  ref={ref}
                  className="ld-modal-field-area"
                  style={{height}}
                />
                <ModalFiledErrorTip message={errorTips} />
              </>
            );
          }}
        />
      </div>
    </div>
  );
};

export default LDModalArea;