import {
  Slider,
  SliderFilledTrack,
  SliderThumb,
  SliderTrack,
} from '@chakra-ui/react';
import { observer } from 'mobx-react-lite';
import { RefObject } from 'react';
import { twMerge } from 'tailwind-merge';

import { useStores } from '@/app/(root)/AppProviders';
import { getAudioVolumeFromDisplayVolume } from '@/utils/audio';
import { colorVar } from '@/utils/utils';

const VolumeSlider = observer<any>(
  ({
    className,
    top,
    left,
    buttonWidth,
    ref,
  }: {
    className?: string;
    top: number;
    left: number;
    buttonWidth?: number;
    buttonHeight?: number;
    ref: RefObject<any>;
  }) => {
    const { playbar } = useStores();

    if (top == null || left == null || isNaN(top) || isNaN(left)) {
      return null;
    }

    const sliderHeight = 80;
    const spacing = 8;
    const minViewportTop = 16;

    let sliderTop = top - sliderHeight - spacing;
    if (sliderTop < minViewportTop) {
      sliderTop = minViewportTop;
    }

    const buttonCenter = buttonWidth ? left + buttonWidth / 2 : left;

    return (
      <div
        ref={ref}
        className={twMerge(
          `fixed z-[100] flex h-auto w-auto rounded-md bg-background-secondary px-1 py-2 pt-4`,
          className
        )}
        style={{
          top: `${sliderTop}px`,
          left: `${buttonCenter}px`,
          transform: 'translateX(-50%)',
          height: `${sliderHeight}px`,
        }}
        aria-label='Playbar: Volume Control'
      >
        <Slider
          flex='1'
          mx={2}
          orientation='vertical'
          aria-label='Playbar: Volume Control'
          focusThumbOnChange={false}
          value={playbar.displayVolume * 100}
          onChange={(value) => {
            playbar.setVolume(getAudioVolumeFromDisplayVolume(value / 100));
          }}
        >
          <SliderTrack
            borderWidth={'1px'}
            borderColor={colorVar('background/secondary')}
            background={colorVar('foreground/inactive')}
          >
            <SliderFilledTrack background={colorVar('foreground/secondary')} />
          </SliderTrack>
          <SliderThumb
            boxSize='12px'
            background={colorVar('foreground/primary')}
            borderWidth={'1px'}
            borderColor={colorVar('background/secondary')}
          />
        </Slider>
      </div>
    );
  }
);

export default VolumeSlider;