import css from './index.module.css';
import {Row, Space, Col, Input} from 'antd';
import classNames from 'classnames';
import {FC} from 'react';
import {Controller, UseControllerProps} from 'react-hook-form';

type Props = {
  label: string;
  placeholder?: string;
  width?: string;
  type?: string;
  disabled?: boolean;
} & UseControllerProps<any, any>;

const OperationField: FC<Props> = function({
  control,
  name,
  width,
  label,
  placeholder,
  type,
  disabled,
}) {
  return (
    <Row style={{width: width ?? '300px'}}>
      <Space direction='vertical' className='width-full'>
        <Col>
          <label htmlFor={`operation_${name}`}>{label}</label>
        </Col>
        <Col>
          <Controller
            name={name}
            control={control}
            render={function({field: {value, onChange, ref}, formState: {errors}}) {
              const errorTips = errors[name]?.message?.toString() ?? '';
              return (
                <>
                  <Input
                    disabled={disabled}
                    name={name}
                    placeholder={placeholder ?? '请输入'}
                    id={`operation_${name}`}
                    data-testid={`field_${name}`}
                    value={value}
                    onChange={onChange}
                    ref={ref}
                    type={type}
                  />
                  <p className={classNames([css.errorTips, {[css.errorTipsHidden]: !errorTips}])}>
                    {errorTips}
                  </p>
                </>
              );
            }}
          />

        </Col>
      </Space>
    </Row>
  );
};

export default OperationField;
