import { type Breakpoint } from '@mui/material';
import { type ThemeOptions } from '@blocklet/theme';
import { useCreation } from 'ahooks';
import { useTheme } from '../Theme';
import useMobile from './use-mobile';

export default function useBlockletLogo({
  key = 'sm',
  meta = {},
  theme: themeOverrides = {},
  square,
}: { key?: number | Breakpoint; meta?: any; theme?: ThemeOptions; square?: boolean } = {}) {
  const isMobileDevice = useMobile({ key });
  const theme = useTheme();

  const mode = useCreation(() => {
    return themeOverrides?.palette?.mode || theme.palette.mode;
  }, [theme, themeOverrides]);

  const finalAppLogo = useCreation<string>(() => {
    const { appLogo, appLogoDark, appLogoRect, appLogoRectDark } = Object.assign({}, window.blocklet ?? {}, meta);
    const isDark = mode === 'dark';

    const squareLogo = (isDark ? appLogoDark : appLogo) || appLogo;
    // 深色模式尽可能优先使用深色图标
    const rectLogo = (isDark ? appLogoRectDark || appLogoDark : appLogoRect) || appLogoRect;

    return isMobileDevice || square ? squareLogo : rectLogo || squareLogo || '';
  }, [mode, meta, isMobileDevice, square]);

  return finalAppLogo;
}
