import React, { useState, ReactElement } from 'react';
import { Collapsible } from './Collapsible';
import classnames from 'classnames';
import './PriceFilter.scss';

export interface Props {
  currency: string;
  defaultMin: number;
  defaultMax: number;
  error: Array<Error>;
  handleClear: () => void;
  handleSubmit: (minAndMax: Array<number | string>) => void;
}

const validateInput = (input: string): boolean => {
  return Boolean(input.match(/^$|^\d{1,7}$/));
};

export const PriceFilter = (props: Props): ReactElement<HTMLDivElement> => {
  const [min, setMin] = useState(props.defaultMin || '');
  const [max, setMax] = useState(props.defaultMax || '');

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
    event.preventDefault();
    props.handleSubmit([min, max]);
  };

  const handleMinChange = (
    event: React.ChangeEvent<HTMLInputElement>,
  ): void => {
    const value = event.target.value;
    validateInput(value) && setMin(value);
  };

  const handleMaxChange = (
    event: React.ChangeEvent<HTMLInputElement>,
  ): void => {
    const value = event.target.value;
    validateInput(value) && setMax(value);
  };

  const handlePriceClear = (): void => {
    setMin('');
    setMax('');
    props.handleSubmit(['', '']);
    props.handleClear();
  };

  return (
    <div className="leftnav-section price-filter">
      <Collapsible header={<div className="leftnav-section-header">Price</div>}>
        <div className="price-filter__error-message">{props.error}</div>
        <form
          className={classnames('price-filter__form', {
            error: props.error && props.error.length > 0,
          })}
          onSubmit={handleSubmit}
        >
          <span className="price-filter__input">
            <span
              className={classnames('pseudo-placeholder', {
                hide: min == '',
              })}
            >
              {props.currency + ' min'}
            </span>
            <input
              type="text"
              placeholder={props.currency + ' min'}
              value={min}
              onChange={handleMinChange}
            />
          </span>
          <span className="price-filter__to">to</span>
          <span className="price-filter__input">
            <span
              className={classnames('pseudo-placeholder', {
                hide: max == '',
              })}
            >
              {props.currency + ' max'}
            </span>
            <input
              type="text"
              placeholder={props.currency + ' max'}
              value={max}
              onChange={handleMaxChange}
            />
          </span>
          <button
            className="price-filter__submit-button mo-display-icon-arrow_md_right"
            type="submit"
          />
          <div
            className="price-filter__clear-button"
            onClick={handlePriceClear}
          >
            Clear
          </div>
        </form>
      </Collapsible>
    </div>
  );
};