import React from 'react';
import { CogwheelIcon } from '../components/CogwheelIcon';
import { useAtom } from 'jotai';
import { WidgetData, WidgetExport } from '../../types';
import { globalSettingsOpenState } from '../../state/globalSettingsOpen.state';

interface GlobalSettingsProps {
  addWidget: (widget: WidgetData) => void,
}

const GlobalSettingsComponent: React.FC<GlobalSettingsProps> = ({ addWidget }) => {
  const [isGlobalSettingsOpen, setGlobalSettingsOpen] = useAtom(globalSettingsOpenState)
  
  return (
      <CogwheelIcon className="settings-toggle" size={24} onClick={() => setGlobalSettingsOpen(!isGlobalSettingsOpen)} />
  );
};

export const GlobalSettingsWidget: WidgetExport = {
  settings: () => <></>,
  widget: GlobalSettingsComponent
}