import React from "react";
import PropTypes from "prop-types";
import { IRangeProps } from "./form.d";
import Form from "./form-tags";

const Range = (props: IRangeProps) => {
  const {
    className,
    error,
    help,
    label,
    labelClassName,
    name,
    onChange,
    value,
    max,
    min,
    showNumber,
    step,
    numberClassName,
    showDiapason,
    escapeHelpContent
  } = props;
  const testId = props["data-testid"] || "honeyui-input";

  return (
    <Form.Group>
      <Form.LabelTag className={labelClassName} name={name} data-testid={`${testId}-label`}>
        {label}
      </Form.LabelTag>
      <Form.RangeTag
        className={className}
        numberClassName={numberClassName}
        data-testid={testId}
        name={name}
        onChange={onChange}
        value={value}
        max={max}
        min={min}
        step={step}
        showNumber={showNumber}
        showDiapason={showDiapason}
      />
      <Form.HelpTag data-testid={`${testId}-help`} name={name} escapeContent={escapeHelpContent}>
        {help}
      </Form.HelpTag>
      <Form.ErrorTag data-testid={`${testId}-error`} name={name}>
        {error}
      </Form.ErrorTag>
    </Form.Group>
  );
};

Range.displayName = "Range";

Range.propTypes = {
  className: PropTypes.string,
  error: PropTypes.string,
  help: PropTypes.string,
  label: PropTypes.string,
  labelClassName: PropTypes.string,
  onChange: PropTypes.func,
  value: PropTypes.string.isRequired,
  name: PropTypes.string.isRequired,
  numberClassName: PropTypes.string,
  max: PropTypes.string,
  min: PropTypes.string,
  step: PropTypes.string,
  showNumber: PropTypes.string,
  showDiapason: PropTypes.bool,
  escapeHelpContent: PropTypes.bool
};

export default Range;