import { HotkeyEnum, HotkeyScopeEnum } from '@lobechat/const/hotkeys';
import { useEffect } from 'react';
import { useHotkeysContext } from 'react-hotkeys-hook';

import { useGlobalStore } from '@/store/global';
import { systemStatusSelectors } from '@/store/global/selectors';

import { useHotkeyById } from './useHotkeyById';

export const useToggleImageRightPanelHotkey = () => {
  const showImageTopicPanel = useGlobalStore(systemStatusSelectors.showImageTopicPanel);
  const updateSystemStatus = useGlobalStore((s) => s.updateSystemStatus);

  return useHotkeyById(HotkeyEnum.ToggleRightPanel, () =>
    updateSystemStatus({
      imageTopicPanelWidth: showImageTopicPanel ? 0 : 80,
      showImageTopicPanel: !showImageTopicPanel,
    }),
  );
};

// Register aggregate

export const useRegisterImageHotkeys = () => {
  const { enableScope, disableScope } = useHotkeysContext();

  // Layout
  useToggleImageRightPanelHotkey();

  useEffect(() => {
    enableScope(HotkeyScopeEnum.Image);
    return () => disableScope(HotkeyScopeEnum.Image);
  }, []);
};
