import { IconButton } from '@mui/material';
import {
  LightModeOutlined as LightModeOutlinedIcon,
  Brightness2Outlined as Brightness2OutlinedIcon,
} from '@mui/icons-material';
import { useThrottleFn } from 'ahooks';
import { useColorScheme } from '../Theme/theme-provider';

export default function ThemeModeToggle() {
  const { mode, toggleMode, prefer } = useColorScheme();
  const { run: toggleModeThrottled } = useThrottleFn(
    () => {
      toggleMode();
    },
    {
      wait: 300,
    }
  );

  if (!toggleMode) {
    if (process.env.NODE_ENV !== 'production') {
      console.warn('Please ensure the component is wrapped with ConfigProvider context');
    }

    return null;
  }

  // 跟随系统才显示切换
  if (prefer === 'system' || window.blocklet?.theme?.prefer === 'system') {
    return (
      <IconButton onClick={toggleModeThrottled}>
        {mode === 'light' ? <Brightness2OutlinedIcon /> : <LightModeOutlinedIcon />}
      </IconButton>
    );
  }

  return null;
}
