import React, { useState } from 'react'
import { Range, getTrackBackground } from 'react-range';

const Ranges = () => {
    const [operations, setOperations] = React.useState([1]);
    const operationsSettings = {
        STEP: 1,
        MIN: 1,
        MAX: 8
    }
    const operationsValues = [
        { title: '10'},
        { title: '20'},
        { title: '40'},
        { title: '70'},
        { title: '100'},
        { title: '150'},
        { title: '200'},
        { title: '300'}
    ]
    const [tax, setTax] = useState([1]);
    const taxSettings = {
        STEP: 1,
        MIN: 1,
        MAX: 3
    }
    const taxValues = [
        { title: 'УСН 6%'},
        { title: 'УСН 15%\nЕСХН'},
        { title: 'осн'},
    ]
    const [members, setMembers] = useState([1]);
    const membersSettings = {
        STEP: 1,
        MIN: 1,
        MAX: 100
    }
    return (
        <div className='max-w-[920px] w-full'>
            <div className="flex flex-col mb-20">
                <h2 className='text-black text-[22px] font-medium mb-6'>Система налогооблажения:</h2>
                <Range values={tax}
                    step={taxSettings.STEP}
                    min={taxSettings.MIN}
                    max={taxSettings.MAX}
                    onChange={(values) => setTax(values)}
                    renderMark={({ props, index }) => (
                        <div {...props} style={{ ...props.style}} className={[index * taxSettings.STEP < tax[0] ? 'bg-red-600' : 'bg-slate-500', 'mark w-0.5 h-4 rounded-sm translate-y-full'].join(' ')}><span className='whitespace-nowrap absolute top-4 -translate-x-1/2'><b>{taxValues[index]?.title}</b></span></div>
                    )}
                    renderTrack={({ props, children }) => (
                        <div role='presentation' onMouseDown={props.onMouseDown} onTouchStart={props.onTouchStart} style={{...props.style}}>
                            <div ref={props.ref} style={{background: getTrackBackground({ values: tax, colors: ['#ef4444', '#cbd5e1'], min: taxSettings.MIN, max: taxSettings.MAX,}),}} className='h-[3px] w-full rounded-[30px] [&>.mark:nth-last-child(2)>span]:-translate-x-full [&>.mark:first-child>span]:translate-x-0'>
                                {children}
                            </div>
                        </div>
                    )}
                    renderThumb={({ props }) => (
                        <div {...props} style={{...props.style,}} className='w-7 h-7 rounded-full bg-red-500 hover:bg-red-600 outline-none'></div>
                    )}
                />
            </div>
            <div className="flex flex-col mb-20">
                <h2 className='text-black text-[22px] font-medium mb-6'>Количество операций:</h2>
                <Range values={operations}
                    step={operationsSettings.STEP}
                    min={operationsSettings.MIN}
                    max={operationsSettings.MAX}
                    onChange={(values) => setOperations(values)}
                    renderMark={({ props, index }) => (
                        <div {...props} style={{ ...props.style}} className={[index * operationsSettings.STEP < operations[0] ? 'bg-red-600' : 'bg-slate-500', 'mark w-0.5 h-4 rounded-sm translate-y-full'].join(' ')}><span className='whitespace-nowrap absolute top-4 -translate-x-1/2'>до <b>{operationsValues[index]?.title}</b></span></div>
                    )}
                    renderTrack={({ props, children }) => (
                        <div role='presentation' onMouseDown={props.onMouseDown} onTouchStart={props.onTouchStart}style={{...props.style}}>
                            <div ref={props.ref} style={{background: getTrackBackground({ values: operations, colors: ['#ef4444', '#cbd5e1'], min: operationsSettings.MIN, max: operationsSettings.MAX,}),}} className='h-[3px] w-full rounded-[30px] [&>.mark:nth-last-child(2)>span]:-translate-x-full [&>.mark:first-child>span]:translate-x-0'>
                                {children}
                            </div>
                        </div>
                    )}
                    renderThumb={({ props }) => (
                        <div {...props} style={{...props.style,}} className='w-7 h-7 rounded-full bg-red-500 hover:bg-red-600 outline-none'></div>
                    )}
                />
            </div>
            <div className="flex flex-col mb-20">
                <div className="flex justify-between items-center mb-6">
                    <h2 className='text-black text-[22px] font-medium'>Количество сотрудников:</h2>
                    <output className='text-black text-[22px] font-medium rounded-[20px] bg-white shadow-sm px-5 py-1'>{members[0]}</output>
                </div>
                <Range values={members}
                    step={membersSettings.STEP}
                    min={membersSettings.MIN}
                    max={membersSettings.MAX}
                    onChange={(values) => setMembers(values)}
                    renderMark={({ props, index }) => (
                        <div {...props} style={{ ...props.style}} className={[index * membersSettings.STEP < members[0] ? 'bg-red-600' : 'bg-slate-500', [1, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100].includes(index+1) ? '' : 'hidden', 'mark w-0.5 h-4 rounded-sm translate-y-full'].join(' ')}><span className='whitespace-nowrap absolute top-4 -translate-x-1/2'><b>{index+1}</b></span></div>
                    )}
                    renderTrack={({ props, children }) => (
                        <div role='presentation' onMouseDown={props.onMouseDown} onTouchStart={props.onTouchStart}style={{...props.style}}>
                            <div ref={props.ref} style={{background: getTrackBackground({ values: members, colors: ['#ef4444', '#cbd5e1'], min: membersSettings.MIN, max: membersSettings.MAX,}),}} className='h-[3px] w-full rounded-[30px] [&>.mark:nth-last-child(2)>span]:-translate-x-full [&>.mark:first-child>span]:translate-x-0'>
                                {children}
                            </div>
                        </div>
                    )}
                    renderThumb={({ props }) => (
                        <div {...props} style={{...props.style,}} className='w-7 h-7 rounded-full bg-red-500 hover:bg-red-600 outline-none'></div>
                    )}
                />
            </div>
        </div>
    )
}

export default Ranges;