import clsx from 'clsx';
import { clamp } from 'lodash-es';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { twMerge } from 'tailwind-merge';

import useDragLifecycle, {
  DragLifecycleCallback,
  getEventCoordinates,
} from '@/hooks/useDragLifecycle';

export enum TrimmerDragType {
  Range = 'range',
  Content = 'content',
  None = 'none',
}

export type TrimmerProps = {
  className?: string;
  containerClassName?: string;
  contentWrapperClassName?: string;
  contentClassName?: string;
  rangeContainerClassName?: string;
  rangeClassName?: string;
  progressClassName?: string;
  handleClassName?: string;
  playheadClassName?: string;
  tooltipClassName?: string;
  disabled?: boolean;
  disableHandles?: boolean;
  disableRange?: boolean;
  clampPlayheadToRange?: boolean;
  dragType?: TrimmerDragType;
  start?: number;
  end?: number;
  duration?: number;
  viewportStart?: number;
  viewportEnd?: number;
  current?: number;
  nudgeInterval?: number;
  shiftNudgeInterval?: number;
  onDragStart?: () => void;
  onDragEnd?: () => void;
  onRangeSet?: (start: number, end: number) => void;
  onViewportSet?: (viewportStart: number, viewportEnd: number) => void;
  onCurrentTimeSet?: (value: number) => void;
  renderTooltip?: React.ComponentType<{
    currentTime?: number;
    duration?: number;
    hoverTime?: number | null;
    x?: number;
    y?: number;
    width?: number;
    height?: number;
    isHovered?: boolean;
    disabled?: boolean;
    className?: string;
    style?: React.CSSProperties;
  }>;
};

function valueToPercent(value: number, total: number, fractionalDigits = 2) {
  return total
    ? `${((100 * value) / total).toFixed(fractionalDigits)}%`
    : undefined;
}

function getTrimmerId(el: Element) {
  return el instanceof HTMLElement ? el.dataset.trimmerId : undefined;
}

export type Props = Omit<
  React.HTMLAttributes<HTMLDivElement>,
  keyof TrimmerProps
> &
  TrimmerProps;

const Trimmer: React.FC<Props> = (props) => {
  const {
    children,
    className,
    containerClassName,
    contentWrapperClassName,
    contentClassName,
    rangeContainerClassName,
    rangeClassName,
    progressClassName,
    handleClassName,
    playheadClassName,
    tooltipClassName,
    disabled = false,
    disableHandles = false,
    disableRange: explicitDisableRange,
    clampPlayheadToRange = false,
    duration = 1,
    start = 0,
    end = duration,
    viewportStart = 0,
    viewportEnd = duration,
    current,
    nudgeInterval = duration / 100,
    shiftNudgeInterval = 10 * nudgeInterval,
    onDragStart,
    onDragEnd,
    onRangeSet,
    onViewportSet,
    onCurrentTimeSet,
    dragType = onViewportSet && onRangeSet
      ? TrimmerDragType.Content
      : onRangeSet
        ? TrimmerDragType.Range
        : TrimmerDragType.None,
    renderTooltip,
    ...restProps
  } = props;

  const containerRef = useRef<HTMLDivElement>(null);

  const viewportWidth = viewportEnd - viewportStart;
  const contentWidth = valueToPercent(duration, viewportWidth);
  const contentOffset = valueToPercent(-viewportStart, viewportWidth);
  const contentStart = valueToPercent(start, duration);
  const contentEnd = valueToPercent(end, duration);
  const contentCurrent =
    current == null ? undefined : valueToPercent(current, duration);
  const rangeLeft = valueToPercent(start - viewportStart, viewportWidth);
  const rangeRight = valueToPercent(viewportEnd - end, viewportWidth);
  const playbackProgress =
    current == null ? undefined : valueToPercent(current - start, end - start);

  const stateRef = useRef({
    // Current state
    start,
    end,
    current,
    duration,
    viewportStart,
    viewportEnd,
    viewportWidth,
    // For tooltip
    dragId: null as string | null,
    isHovered: false,
    // State snapshot at drag start
    prevStart: start,
    prevEnd: end,
    prevCurrent: current,
    prevDuration: duration,
    prevViewportStart: viewportStart,
    prevViewportEnd: viewportEnd,
    prevViewportWidth: viewportWidth,
  });

  useEffect(() => {
    stateRef.current.start = start;
    stateRef.current.end = end;
    stateRef.current.current = current;
    stateRef.current.duration = duration;
    stateRef.current.viewportStart = viewportStart;
    stateRef.current.viewportEnd = viewportEnd;
    stateRef.current.viewportWidth = viewportWidth;
  }, [
    start,
    end,
    current,
    duration,
    viewportStart,
    viewportEnd,
    viewportWidth,
  ]);

  const createStateSnapshot = useCallback(() => {
    stateRef.current.prevStart = stateRef.current.start;
    stateRef.current.prevEnd = stateRef.current.end;
    stateRef.current.prevCurrent = stateRef.current.current;
    stateRef.current.prevDuration = stateRef.current.duration;
    stateRef.current.prevViewportStart = stateRef.current.viewportStart;
    stateRef.current.prevViewportEnd = stateRef.current.viewportEnd;
    stateRef.current.prevViewportWidth = stateRef.current.viewportWidth;
  }, []);

  const [hoverData, setHoverData] = useState<{
    id?: string;
    isHovered: boolean;
    progress: number;
    clientX: number;
    clientY: number;
    relativeX: number;
    relativeY: number;
    trackWidth: number;
    trackHeight: number;
  } | null>(null);

  const handleDragStart = useCallback<DragLifecycleCallback>(
    (data) => {
      const dragId =
        data.event.target instanceof HTMLElement
          ? getTrimmerId(data.event.target)
          : undefined;
      if (dragId) {
        stateRef.current.dragId = dragId;
      }
      createStateSnapshot();
      onDragStart?.();
    },
    [onDragStart, createStateSnapshot]
  );
  const handleDragEnd = useCallback<DragLifecycleCallback>(() => {
    stateRef.current.dragId = null;
    setHoverData(
      (prevHoverData) =>
        prevHoverData && {
          ...prevHoverData,
          isHovered: stateRef.current.isHovered,
        }
    );
    onDragEnd?.();
  }, [onDragEnd]);

  const updateHoverDataFromEvent = useCallback(
    (e: MouseEvent | TouchEvent, isHovered = true) => {
      if (!containerRef.current) return;
      const { clientX, clientY } = getEventCoordinates(e);
      if (clientX == null || clientY == null) return;

      const id =
        e.target instanceof HTMLElement ? getTrimmerId(e.target) : undefined;
      const rect = containerRef.current.getBoundingClientRect();
      const relativeX = clientX - rect.x;
      const relativeY = clientY - rect.y;
      const progress = clamp(relativeX / rect.width, 0, 1);

      setHoverData((prevHoverData) => ({
        id: stateRef.current.dragId ? prevHoverData?.id : id,
        progress,
        clientX,
        clientY,
        relativeX,
        relativeY,
        trackWidth: rect.width,
        trackHeight: rect.height,
        isHovered,
      }));
    },
    []
  );

  const handleMouseMove = useCallback(
    (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
      stateRef.current.isHovered = true;
      updateHoverDataFromEvent(e.nativeEvent);
    },
    [updateHoverDataFromEvent]
  );
  const handleMouseLeave = useCallback(() => {
    stateRef.current.isHovered = false;
    setHoverData(
      (prevHoverData) => prevHoverData && { ...prevHoverData, isHovered: false }
    );
  }, []);

  const [handleStartTimeMouseDown] = useDragLifecycle({
    onDragStart: handleDragStart,
    onDragEnd: handleDragEnd,
    onDragUpdate(data) {
      if (data.event.type !== 'mouseup' && data.event.type !== 'touchend') {
        updateHoverDataFromEvent(data.event);
      }
      if (onRangeSet && containerRef.current) {
        const rect = containerRef.current.getBoundingClientRect();
        const offset =
          (stateRef.current.viewportWidth * data.deltaX) / rect.width;
        const start = clamp(
          stateRef.current.prevStart + offset,
          0,
          stateRef.current.end
        );
        onRangeSet(start, stateRef.current.end);
        // Enforce playhead clamp if enabled
        if (clampPlayheadToRange && onCurrentTimeSet) {
          onCurrentTimeSet(
            clamp(
              stateRef.current.prevCurrent ?? 0,
              start,
              stateRef.current.end
            )
          );
        }
      }
    },
  });

  const [handleEndTimeMouseDown] = useDragLifecycle({
    onDragStart: handleDragStart,
    onDragEnd: handleDragEnd,
    onDragUpdate(data) {
      if (data.event.type !== 'mouseup' && data.event.type !== 'touchend') {
        updateHoverDataFromEvent(data.event);
      }
      if (onRangeSet && containerRef.current) {
        const rect = containerRef.current.getBoundingClientRect();
        const offset =
          (stateRef.current.viewportWidth * data.deltaX) / rect.width;
        const end = clamp(
          stateRef.current.prevEnd + offset,
          stateRef.current.start,
          stateRef.current.duration
        );
        onRangeSet(stateRef.current.start, end);
        // Enforce playhead clamp if enabled
        if (clampPlayheadToRange && onCurrentTimeSet) {
          onCurrentTimeSet(
            clamp(
              stateRef.current.prevCurrent ?? 0,
              stateRef.current.start,
              end
            )
          );
        }
      }
    },
  });

  const [handleTimeRangeMouseDown] = useDragLifecycle({
    onDragStart: handleDragStart,
    onDragEnd: handleDragEnd,
    onDragUpdate(data) {
      if (data.event.type !== 'mouseup' && data.event.type !== 'touchend') {
        updateHoverDataFromEvent(data.event);
      }
      if (onRangeSet && containerRef.current) {
        const rect = containerRef.current.getBoundingClientRect();
        const offset =
          (stateRef.current.viewportWidth * data.deltaX) / rect.width;
        const rangeDuration =
          stateRef.current.prevEnd - stateRef.current.prevStart;
        const start = clamp(
          stateRef.current.prevStart + offset,
          0,
          stateRef.current.duration - rangeDuration
        );
        const end = start + rangeDuration;
        onRangeSet(start, end);
        // Enforce playhead clamp if enabled
        if (clampPlayheadToRange && onCurrentTimeSet) {
          onCurrentTimeSet(
            clamp(stateRef.current.prevCurrent ?? 0, start, end)
          );
        }
      }
    },
  });

  const [handleContentMouseDown] = useDragLifecycle({
    onDragStart: handleDragStart,
    onDragEnd: handleDragEnd,
    onDragUpdate(data) {
      if (data.event.type !== 'mouseup' && data.event.type !== 'touchend') {
        updateHoverDataFromEvent(data.event);
      }
      if (onRangeSet && containerRef.current) {
        const rect = containerRef.current.getBoundingClientRect();
        const offset =
          (stateRef.current.viewportWidth * data.deltaX) / rect.width;
        const rangeDuration =
          stateRef.current.prevEnd - stateRef.current.prevStart;
        const start = clamp(
          stateRef.current.prevStart - offset,
          0,
          stateRef.current.duration - rangeDuration
        );
        const end = start + rangeDuration;
        const effectiveOffset = start - stateRef.current.start;
        const viewportStart = stateRef.current.viewportStart + effectiveOffset;
        const viewportEnd = stateRef.current.viewportEnd + effectiveOffset;
        onRangeSet(start, end);
        if (onViewportSet) {
          onViewportSet(viewportStart, viewportEnd);
        }
        if (onCurrentTimeSet && stateRef.current.current != null) {
          onCurrentTimeSet(stateRef.current.current + effectiveOffset);
        }
      }
    },
  });

  const [handleCurrentTimeMouseDown] = useDragLifecycle({
    onDragStart: handleDragStart,
    onDragEnd: handleDragEnd,
    onDragUpdate(data) {
      if (data.event.type !== 'mouseup' && data.event.type !== 'touchend') {
        updateHoverDataFromEvent(data.event);
      }
      if (onCurrentTimeSet && containerRef.current) {
        const rect = containerRef.current.getBoundingClientRect();
        const offset =
          (stateRef.current.viewportWidth * data.deltaX) / rect.width;

        const value = clampPlayheadToRange
          ? clamp(
              (stateRef.current.prevCurrent ?? 0) + offset,
              stateRef.current.start,
              stateRef.current.end
            )
          : clamp((stateRef.current.prevCurrent ?? 0) + offset, 0, duration);
        onCurrentTimeSet(value);
      }
    },
  });

  const handleStartTimeKeyDown = useCallback(
    (e: React.KeyboardEvent) => {
      if (onRangeSet) {
        const offset = e.shiftKey ? shiftNudgeInterval : nudgeInterval;
        switch (true) {
          case e.key === 'ArrowLeft': {
            const value =
              stateRef.current.start == null
                ? 0
                : stateRef.current.start - offset;
            const start = clamp(value, 0, stateRef.current.end);
            onRangeSet(start, stateRef.current.end);
            break;
          }
          case e.key === 'ArrowRight': {
            const value =
              stateRef.current.start == null
                ? stateRef.current.duration
                : stateRef.current.start + offset;
            const start = clamp(value, 0, stateRef.current.end);
            onRangeSet(start, stateRef.current.end);
            break;
          }
          default:
            break;
        }
      }
    },
    [onRangeSet, nudgeInterval, shiftNudgeInterval]
  );

  const handleEndTimeKeyDown = useCallback(
    (e: React.KeyboardEvent) => {
      if (onRangeSet) {
        const offset = e.shiftKey ? shiftNudgeInterval : nudgeInterval;
        switch (true) {
          case e.key === 'ArrowLeft': {
            const value =
              stateRef.current.end == null ? 0 : stateRef.current.end - offset;
            const end = clamp(
              value,
              stateRef.current.start,
              stateRef.current.duration
            );
            onRangeSet(stateRef.current.start, end);
            break;
          }
          case e.key === 'ArrowRight': {
            const value =
              stateRef.current.end == null
                ? stateRef.current.duration
                : stateRef.current.end + offset;
            const end = clamp(
              value,
              stateRef.current.start,
              stateRef.current.duration
            );
            onRangeSet(stateRef.current.start, end);
            break;
          }
          default:
            break;
        }
      }
    },
    [onRangeSet, nudgeInterval, shiftNudgeInterval]
  );

  const handleTimeRangeKeyDown = useCallback(
    (e: React.KeyboardEvent) => {
      if (onRangeSet) {
        const offset = e.shiftKey ? shiftNudgeInterval : nudgeInterval;
        const rangeDuration = stateRef.current.end - stateRef.current.start;
        switch (true) {
          case e.key === 'ArrowLeft': {
            const start = clamp(
              stateRef.current.start - offset,
              0,
              stateRef.current.duration - rangeDuration
            );
            const end = start + rangeDuration;
            onRangeSet(start, end);
            break;
          }
          case e.key === 'ArrowRight': {
            const start = clamp(
              stateRef.current.start + offset,
              0,
              stateRef.current.duration - rangeDuration
            );
            const end = start + rangeDuration;
            onRangeSet(start, end);
            break;
          }
          default:
            break;
        }
      }
    },
    [onRangeSet, nudgeInterval, shiftNudgeInterval]
  );

  const handleContentKeyDown = useCallback(
    (e: React.KeyboardEvent) => {
      if (onRangeSet && onViewportSet) {
        const offset = e.shiftKey ? shiftNudgeInterval : nudgeInterval;
        const rangeDuration = stateRef.current.end - stateRef.current.start;
        switch (true) {
          case e.key === 'ArrowLeft': {
            const start = clamp(
              stateRef.current.start + offset,
              0,
              stateRef.current.duration - rangeDuration
            );
            const end = start + rangeDuration;
            const effectiveOffset = start - stateRef.current.start;
            const viewportStart =
              stateRef.current.viewportStart + effectiveOffset;
            const viewportEnd = stateRef.current.viewportEnd + effectiveOffset;
            onRangeSet(start, end);
            onViewportSet(viewportStart, viewportEnd);
            if (onCurrentTimeSet && stateRef.current.current != null) {
              onCurrentTimeSet(stateRef.current.current + effectiveOffset);
            }
            break;
          }
          case e.key === 'ArrowRight': {
            const start = clamp(
              stateRef.current.start - offset,
              0,
              stateRef.current.duration + rangeDuration
            );
            const end = start + rangeDuration;
            const effectiveOffset = start - stateRef.current.start;
            const viewportStart =
              stateRef.current.viewportStart + effectiveOffset;
            const viewportEnd = stateRef.current.viewportEnd + effectiveOffset;
            onRangeSet(start, end);
            onViewportSet(viewportStart, viewportEnd);
            if (onCurrentTimeSet && stateRef.current.current != null) {
              onCurrentTimeSet(stateRef.current.current + effectiveOffset);
            }
            break;
          }
          default:
            break;
        }
      }
    },
    [
      onRangeSet,
      onViewportSet,
      onCurrentTimeSet,
      nudgeInterval,
      shiftNudgeInterval,
    ]
  );

  const handleCurrentTimeKeyDown = useCallback(
    (e: React.KeyboardEvent) => {
      if (onCurrentTimeSet) {
        const offset = e.shiftKey ? shiftNudgeInterval : nudgeInterval;
        switch (true) {
          case e.key === 'ArrowLeft': {
            const value =
              stateRef.current.current == null
                ? 0
                : clamp(
                    stateRef.current.current - offset,
                    0,
                    stateRef.current.duration
                  );
            onCurrentTimeSet(value);
            break;
          }
          case e.key === 'ArrowRight': {
            const value =
              stateRef.current.current == null
                ? stateRef.current.duration
                : clamp(
                    stateRef.current.current + offset,
                    0,
                    stateRef.current.duration
                  );
            onCurrentTimeSet(value);
            break;
          }
          default:
            break;
        }
      }
    },
    [onCurrentTimeSet, nudgeInterval, shiftNudgeInterval]
  );

  const disableRange =
    explicitDisableRange ??
    !(
      dragType === TrimmerDragType.Range || dragType === TrimmerDragType.Content
    );

  let hoverTime = hoverData
    ? hoverData.progress * viewportWidth + viewportStart
    : undefined;
  let tooltipPosition = undefined;
  if (hoverData) {
    switch (hoverData?.id) {
      case 'start':
        hoverTime = start;
        tooltipPosition = valueToPercent(start, duration);
        break;
      case 'end':
        hoverTime = end;
        tooltipPosition = valueToPercent(end, duration);
        break;
      case 'current':
        hoverTime = current ?? 0;
        tooltipPosition = valueToPercent(current ?? 0, duration);
        break;
      default:
        tooltipPosition = valueToPercent(
          hoverData.relativeX,
          hoverData.trackWidth
        );
        break;
    }
  }
  // Hide hover if the time is outside of the range
  const isHovered =
    hoverTime == null || hoverTime < 0 || hoverTime > duration
      ? false
      : (hoverData?.isHovered ?? false);

  return (
    <div
      className={twMerge(
        'relative h-12 w-full text-(--trimmer-primary)',
        '[--trimmer-primary:var(--color-foreground-primary)]',
        '[--trimmer-secondary:var(--color-background-primary)]',
        '[--trimmer-padding:0px]',
        className
      )}
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
      {...restProps}
    >
      <div
        className={twMerge(
          'absolute inset-x-(--trimmer-padding) inset-y-0',
          containerClassName
        )}
        ref={containerRef}
      >
        {/* Content outer wrapper: clipping */}
        <div
          data-trimmer-id='track'
          className={twMerge(
            'absolute inset-x-[calc(-1*var(--trimmer-padding))] inset-y-0',
            'overflow-clip rounded-md', // clip overflow
            contentWrapperClassName
          )}
        >
          {/* Content inner wrapper: apply padding */}
          <div className='absolute inset-x-(--trimmer-padding) inset-y-0'>
            {/* Content: applies drag positioning */}
            <div
              className={twMerge(
                'absolute inset-y-0 left-0 w-full',
                'overflow-clip rounded-md', // round the content when not overflowing
                contentClassName
              )}
              style={
                {
                  left: contentOffset,
                  width: contentWidth,
                  '--trimmer-start': contentStart,
                  '--trimmer-end': contentEnd,
                  '--trimmer-current': contentCurrent,
                  '--trimmer-mask-inactive': '#00000080',
                  '--trimmer-mask-active': '#000000',
                  '--trimmer-mask': `linear-gradient(${[
                    '90deg',
                    'var(--trimmer-mask-inactive) var(--trimmer-start)',
                    'var(--trimmer-mask-active) var(--trimmer-start)',
                    'var(--trimmer-mask-active) var(--trimmer-end)',
                    'var(--trimmer-mask-inactive) var(--trimmer-end)',
                  ].join(',')})`,
                } as React.CSSProperties
              }
            >
              {children}
            </div>
          </div>
        </div>
        {disableRange && disableHandles ? null : (
          <div
            className={twMerge(
              'absolute inset-0',
              'drop-shadow-black-1',
              'before:pointer-events-none before:absolute before:-inset-x-[2px] before:inset-y-0 before:border-2 before:border-current',
              clsx({
                'before:rounded-lg': disableHandles,
              }),
              rangeContainerClassName
            )}
            style={{
              left: rangeLeft,
              right: rangeRight,
            }}
          >
            {current == null ? null : (
              <div
                className={twMerge(
                  'hidden',
                  'absolute inset-x-[2px] inset-y-[4px] rounded-[0.3125rem]',
                  'bg-background-glass-thick mask-(--playback-mask)',
                  progressClassName
                )}
                style={
                  {
                    '--playback-progress': playbackProgress,
                    '--playback-mask-inactive': '#00000000',
                    '--playback-mask-active': '#000000',
                    '--playback-mask': `linear-gradient(${[
                      '90deg',
                      'var(--playback-mask-active) var(--playback-progress)',
                      'var(--playback-mask-inactive) var(--playback-progress)',
                    ].join(',')})`,
                  } as React.CSSProperties
                }
              />
            )}
            {disableRange ? null : (
              <button
                data-trimmer-id='range'
                className={twMerge(
                  'absolute inset-0 cursor-grab active:cursor-grabbing',
                  rangeClassName
                )}
                onMouseDown={
                  dragType === TrimmerDragType.Content
                    ? handleContentMouseDown
                    : handleTimeRangeMouseDown
                }
                onTouchStart={
                  dragType === TrimmerDragType.Content
                    ? handleContentMouseDown
                    : handleTimeRangeMouseDown
                }
                onKeyDown={
                  dragType === TrimmerDragType.Content
                    ? handleContentKeyDown
                    : handleTimeRangeKeyDown
                }
                disabled={disabled}
              />
            )}
            {disableHandles ? null : (
              <>
                <button
                  data-trimmer-id='start'
                  className={twMerge(
                    'absolute inset-y-0 right-[calc(100%-0.125rem)]',
                    'flex cursor-col-resize items-center justify-center',
                    'w-4 rounded-lg rounded-r-none bg-current',
                    'after:block after:h-2.5 after:w-0.5 after:rounded-sm after:bg-(--trimmer-secondary)',
                    handleClassName
                  )}
                  onMouseDown={handleStartTimeMouseDown}
                  onTouchStart={handleStartTimeMouseDown}
                  onKeyDown={handleStartTimeKeyDown}
                  disabled={disabled}
                />
                <button
                  data-trimmer-id='end'
                  className={twMerge(
                    'absolute inset-y-0 left-[calc(100%-0.125rem)]',
                    'flex cursor-col-resize items-center justify-center',
                    'w-4 rounded-lg rounded-l-none bg-current',
                    'after:block after:h-2.5 after:w-0.5 after:rounded-sm after:bg-(--trimmer-secondary)',
                    handleClassName
                  )}
                  onMouseDown={handleEndTimeMouseDown}
                  onTouchStart={handleEndTimeMouseDown}
                  onKeyDown={handleEndTimeKeyDown}
                  disabled={disabled}
                />
              </>
            )}
          </div>
        )}
        {current == null ? null : (
          <button
            data-trimmer-id='current'
            className={twMerge(
              'absolute inset-y-0 left-0 -translate-x-1/2',
              '-my-1 w-1.5 rounded-md',
              'bg-current drop-shadow-md',
              playheadClassName
            )}
            style={{
              left: valueToPercent(current - viewportStart, viewportWidth),
            }}
            onMouseDown={handleCurrentTimeMouseDown}
            onTouchStart={handleCurrentTimeMouseDown}
            onKeyDown={handleCurrentTimeKeyDown}
            disabled={disabled}
          />
        )}
        {typeof renderTooltip === 'function'
          ? React.createElement(renderTooltip, {
              x: hoverData?.relativeX,
              y: hoverData?.relativeY,
              width: hoverData?.trackWidth,
              height: hoverData?.trackHeight,
              isHovered,
              currentTime: current,
              duration: duration,
              hoverTime: hoverTime && clamp(hoverTime, 0, duration),
              disabled: false,
              className: twMerge('my-2', tooltipClassName),
              style: {
                '--tooltip-position': tooltipPosition,
              } as React.CSSProperties,
            })
          : null}
      </div>
    </div>
  );
};

export default Trimmer;