index.tsx

import { useEffect, useState } from 'react';
import { Popover } from 'antd';
import { useAtom, useAtomValue, useSetAtom } from 'jotai';
import { MouseIcon } from 'lucide-react';

import { menuConfigAtom } from '@/jotai/device';
import {
  mouseJigglerModeAtom,
  mouseModeAtom,
  mouseStyleAtom,
  scrollDirectionAtom,
  scrollIntervalAtom
} from '@/jotai/mouse.ts';
import type { MouseSubItemId } from '@/libs/menu-config';
import { mouseJiggler } from '@/libs/mouse-jiggler';
import * as storage from '@/libs/storage';

import { Direction } from './direction.tsx';
import { Jiggler } from './jiggler.tsx';
import { Mode } from './mode.tsx';
import { Speed } from './speed.tsx';
import { Style } from './style.tsx';

const MOUSE_SUB_COMPONENTS: Record<MouseSubItemId, React.FC> = {
  'mouse.style': Style,
  'mouse.mode': Mode,
  'mouse.direction': Direction,
  'mouse.speed': Speed,
  'mouse.jiggler': Jiggler,
};

export const Mouse = () => {
  const menuConfig = useAtomValue(menuConfigAtom);
  const [mouseStyle, setMouseStyle] = useAtom(mouseStyleAtom);
  const [mouseMode, setMouseMode] = useAtom(mouseModeAtom);
  const setScrollDirection = useSetAtom(scrollDirectionAtom);
  const setScrollInterval = useSetAtom(scrollIntervalAtom);
  const setMouseJigglerMode = useSetAtom(mouseJigglerModeAtom);

  const [isPopoverOpen, setIsPopoverOpen] = useState(false);

  useEffect(() => {
    initMouse();
  }, []);

  function initMouse() {
    const style = storage.getMouseStyle();
    if (style && style !== mouseStyle) {
      setMouseStyle(style);
    }

    const mode = storage.getMouseMode();
    if (mode && mode !== mouseMode) {
      setMouseMode(mode);
    }

    const direction = storage.getMouseScrollDirection();
    if (direction) {
      setScrollDirection(direction > 0 ? 1 : -1);
    }

    const interval = storage.getMouseScrollInterval();
    if (interval) {
      setScrollInterval(interval);
    }

    const jiggler = storage.getMouseJigglerMode();
    mouseJiggler.setMode(jiggler);
    setMouseJigglerMode(jiggler);
  }

  const content = (
    <div className="flex flex-col space-y-0.5">
      {menuConfig.subMenus.mouse.map((itemId) => {
        const Component = MOUSE_SUB_COMPONENTS[itemId];
        return Component ? <Component key={itemId} /> : null;
      })}
    </div>
  );

  return (
    <Popover
      content={content}
      placement="bottomLeft"
      trigger="click"
      arrow={false}
      open={isPopoverOpen}
      onOpenChange={setIsPopoverOpen}
    >
      <div className="flex h-[28px] w-[28px] cursor-pointer items-center justify-center rounded text-neutral-300 hover:bg-neutral-700/70 hover:text-white">
        <MouseIcon size={18} />
      </div>
    </Popover>
  );
};