import { useCallback } from 'react';

import type { ChangeEventHandler } from 'react';
import type { BoxProps } from '../Box';

import Box from '../Box';

export interface RangeSliderProps extends Omit<BoxProps, 'onChange'> {
  min: number;
  max: number;
  value: number;
  step?: number;
  onChange?: (params: { value: number }) => void;
}

const SIZE = '2.2rem';

const RangeSlider = ({
  onChange,
  min,
  max,
  step = 0.1,
  value,
  ...boxProps
}: RangeSliderProps) => (
  <Box {...boxProps} padding="0.25rem 0">
    <div className="inner" style={{ fontSize: SIZE, color: '#fff' }}>
      <div className="bg" />
      <input
        min={min}
        max={max}
        value={value}
        type="range"
        step={step}
        onChange={useCallback<ChangeEventHandler<HTMLInputElement>>(
          ({ target }) => {
            onChange?.({
              value: Number(target.value),
            });
          },
          [onChange]
        )}
      />
    </div>
    <style jsx>{`
      .inner {
        position: relative;
        height: 1em;
      }

      .bg {
        position: absolute;
        top: 50%;
        right: 0;
        left: 0;
        background: currentColor;
        opacity: 0.3;
        height: 0.15em;
        transform: translateY(-50%);
      }

      input[type='range'] {
        position: relative;
        appearance: none;
        color: currentColor;
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
        background: none;
        font-size: 1em;
      }

      input[type='range']::-webkit-slider-thumb {
        appearance: none;
        background: currentColor;
        border-radius: 50%;
        width: 1em;
        height: 1em;
        border-top: solid 0.05em rgba(255, 255, 255, 0.2);
        border-bottom: solid 0.05em rgba(0, 0, 0, 0.2);
        box-shadow: 0 0.1em 0.7em rgba(0, 0, 0, 0.8);
        cursor: grab;
      }

      input[type='range']:active::-webkit-slider-thumb {
        cursor: grabbing;
      }

      input[type='range']::-webkit-slider-runnable-track {
        appearance: none;
        background: none;
      }
    `}</style>
  </Box>
);

export default RangeSlider;