import React, { FC, useMemo } from 'react';

import ReactSlider from 'react-slider';

import { bem } from 'utils/bem';

import { DEFAULT_SLIDER_VALUE } from './constants';
import { ISlider } from './types';

import styles from './slider.scss';

const sliderClassName = bem(styles, 'slider');

export const Slider: FC<ISlider> = (props) => {
  const {
    classNames = '',
    classNamesOverrides,
    defaultValue,
    disabled = false,
    max = 0,
    min = 0,
    minDistance = 1,
    onAfterChange,
    step = 1,
    stepValues,
    value,
    ...overrideProps
  } = props;

  let resolvedDefaultValue: number | number[];

  if (defaultValue === undefined) {
    resolvedDefaultValue = DEFAULT_SLIDER_VALUE;
  } else if (typeof defaultValue !== 'number' && defaultValue.length) {
    const [minDefaultValue, maxDefaultValue] = defaultValue;

    resolvedDefaultValue = [minDefaultValue, maxDefaultValue];
  } else {
    resolvedDefaultValue = defaultValue;
  }

  const sliderAdditionalClassNames = useMemo(() => {
    const additionalClasses = [];

    if (classNames) additionalClasses.push(classNames);

    if (classNamesOverrides?.slider) additionalClasses.push(classNamesOverrides.slider);

    return additionalClasses;
  }, [classNames, classNamesOverrides?.slider]);

  return (
    <ReactSlider
      className={sliderClassName('', { isDisabled: disabled }, sliderAdditionalClassNames)}
      defaultValue={resolvedDefaultValue}
      disabled={disabled}
      max={max}
      min={min}
      minDistance={minDistance}
      onAfterChange={onAfterChange}
      renderThumb={(thumbProps, state): JSX.Element => {
        let label = '';

        if (stepValues) {
          const { valueNow: currentValue } = state;

          label = stepValues[currentValue]?.label;
        }

        return (
          <div {...thumbProps}>
            <span
              className={sliderClassName('thumb-text', undefined, classNamesOverrides?.thumbText)}
            >{`${label}`}</span>
          </div>
        );
      }}
      step={step}
      thumbClassName={sliderClassName('thumb', { isDisabled: disabled }, classNamesOverrides?.thumb)}
      trackClassName={sliderClassName('track', { isDisabled: disabled }, classNamesOverrides?.track)}
      value={value}
      {...overrideProps}
    />
  );
};