import React, {FC, memo} from 'react';
import {getTrackBackground, Range} from 'react-range';
import {cn} from '../../util/bem';
import {SizeType} from '../../util/global-props';
import {Description} from '../description/description.component';
import {Wrapper} from '../wrapper/wrapper.component';
import './range-slider.component.scss';

export type RangeSliderPropsType = {
    className?: string;

    step?: number;
    min?: number;
    max: number;
    values: number[];

    margin?: SizeType;
    flex?: number | string;
    style?: React.CSSProperties;

    tooltip?: boolean;
    tooltipBefore?: React.ReactNode;
    tooltipAfter?: React.ReactNode;

    toFixed?: number | undefined;
    onChange?: (values: number[]) => void;
    onFinalChange?: (values: number[]) => void;

}

// https://www.npmjs.com/package/react-range

const className = cn('range-slider');

export const RangeSlider: FC<RangeSliderPropsType> = memo((props) => {
    const getColors = () => {
        switch (props.values.length) {
            default:
            case 1: return [ '#2EE5CB', '#F2F2F3' ];
            case 2: return [ '#F2F2F3', '#4366F6', '#F2F2F3' ];
        }
    };
    const renderTrack = (p: any) => (
        <div
            className={ className({}, null, props.className) }
            onMouseDown={ p.props.onMouseDown }
            onTouchStart={ p.props.onTouchStart }
            style={ {
                ...p.props.style,
                ...props.style
            } }
        >
            <div
                className={ className('track') }
                ref={ p.props.ref }
                style={ {
                    background: getTrackBackground({
                        values: props.values,
                        colors: getColors(),
                        min:    props.min || 0,
                        max:    props.max
                    })
                } }
            >
                { p.children }
            </div>

        </div>
    );
    const renderThumb = (p: any) => (
        <div
            className={ className('thumb', { active: p.isDragged }) }
            { ...p.props }
        >
            { (props.tooltip || props.tooltipBefore || props.tooltipAfter)
                && (
                    <Description
                        className={ className('tooltip') }
                        color="white"
                        noWrap
                    >
                        { props.tooltipBefore && `${ props.tooltipBefore } ` }
                        { props.toFixed !== undefined ? props.values[ p.index ].toFixed(props.toFixed) :
                          props.values[ p.index ] }
                        { props.tooltipAfter && ` ${ props.tooltipAfter }` }
                    </Description>
                ) }
        </div>
    );

    return (
        <Wrapper
            className={ className({}, null, props.className) }
            valign="center"
            row
            margin={ props.margin }
            flex={ props.flex }
        >
          { /* @ts-ignore */ }
            <Range
                onChange={ (values) => props.onChange && props.onChange(values) }
                onFinalChange={ (values) => props.onFinalChange && props.onFinalChange(values) }
                values={ props.values }
                step={ props.step }
                min={ props.min }
                max={ props.max }
                renderThumb={ (p) => renderThumb(p) }
                renderTrack={ (p) => renderTrack(p) }
            />
        </Wrapper>

    );
});
RangeSlider.defaultProps = {
    step: 1,
    min:  0
};