import React, { FunctionComponent } from "react";

import "./styles.scss";

interface IRangeInputProps {
  maxLabel?: string;
  minLabel?: string;
  valueLabel?: string;
  label?: string;
  max: number;
  min: number;
  step?: number;
  error?: string;
  disabled?: boolean;
  value: number;
  onChange?: (value: number) => void;
}

export const RangeInput: FunctionComponent<IRangeInputProps> = (props) => {
  const {
    maxLabel,
    minLabel,
    step = 1,
    valueLabel,
    error,
    label,
    max = 100,
    min = 0,
    value,
    onChange,
    disabled,
  } = props;

  return (
    <div className="c-range-input">
      <label className="c-range-input__label">{label}</label>
      <div className="c-range-input__border-labels">
        <div className="c-range-input__border-label">{minLabel}</div>
        <div className="c-range-input__border-label">{maxLabel}</div>
      </div>
      <input
        type="range"
        value={value}
        min={min}
        max={max}
        step={step}
        disabled={disabled}
        onChange={({ target: { value } }) => onChange && onChange(+value)}
        className="c-range-input__slider"
      />
      <div className="c-range-input__value">{valueLabel}</div>
      {error && <span className="c-range-input__validation">{error}</span>}
    </div>
  );
};
