/* eslint-disable react/prop-types */
/* eslint-disable no-param-reassign */
import { Info as InfoIcon, CancelRounded as CancelRoundedIcon } from '@mui/icons-material';
import { type SvgIconProps } from '@mui/material';
import Result, { type ResultProps } from './result';
import translations from './translations';
import { useLocaleContext } from '../Locale/context';
import { useTheme } from '../Theme';
import type { Locale } from '../type';

// 优先使用显式指定的 locale, 再尝试使用 context 中的 locale, 最后使用默认 'en'
const useLocale = (locale: Locale) => {
  locale = ['zh', 'en'].includes(locale) ? locale : '';
  const { locale: localeFromContext } = useLocaleContext() || { locale: 'en' };
  const result = locale || localeFromContext;
  return translations[result] ? result : 'en';
};

export type CommonResultProps = { locale: Locale } & Omit<ResultProps, 'icon' | 'title' | 'description'>;

// 404
export function PageNotFound({ locale, ...rest }: CommonResultProps) {
  locale = useLocale(locale);
  return (
    <Result
      icon={<StyledErrorIcon />}
      title={translations[locale]['404'].title}
      description={translations[locale]['404'].description}
      {...rest}
    />
  );
}
PageNotFound.status = '404';

// 403
export function Forbidden({ locale, ...rest }: CommonResultProps) {
  locale = useLocale(locale);
  return (
    <Result
      icon={<StyledErrorIcon />}
      title={translations[locale][403].title}
      description={translations[locale][403].description}
      {...rest}
    />
  );
}
Forbidden.status = '403';

// 500
export function InternalServerError({ locale, ...rest }: CommonResultProps) {
  locale = useLocale(locale);
  return (
    <Result
      icon={<StyledErrorIcon />}
      title={translations[locale][500].title}
      description={translations[locale][500].description}
      {...rest}
    />
  );
}
InternalServerError.status = '500';

// 通用错误
export function Error({ locale, ...rest }: CommonResultProps) {
  locale = useLocale(locale);
  return (
    <Result
      icon={<StyledErrorIcon />}
      title={translations[locale].error.title}
      description={translations[locale].error.description}
      {...rest}
    />
  );
}
Error.status = 'error';

// under maintenance
export function Maintenance({ locale, ...rest }: CommonResultProps) {
  locale = useLocale(locale);
  return (
    <Result
      icon={<StyledInfoIcon />}
      title={translations[locale].maintenance.title}
      description={translations[locale].maintenance.description}
      {...rest}
    />
  );
}
Maintenance.status = 'maintenance';

// coming soon
export function ComingSoon({ locale, ...rest }: CommonResultProps) {
  locale = useLocale(locale);
  return (
    <Result
      icon={<StyledInfoIcon />}
      title={translations[locale].comingSoon.title}
      description={translations[locale].comingSoon.description}
      {...rest}
    />
  );
}
ComingSoon.status = 'comingSoon';

// info, 与其它 status 不同, title/description 需要使用方自己传入
export function Info(props: Omit<ResultProps, 'icon'>) {
  return <Result icon={<StyledInfoIcon />} {...props} />;
}
Info.status = 'info';

function StyledErrorIcon(props: SvgIconProps) {
  const theme = useTheme();
  return <CancelRoundedIcon style={{ color: theme.palette.error.main, fontSize: 72 }} {...props} />;
}

function StyledInfoIcon(props: SvgIconProps) {
  const theme = useTheme();
  return <InfoIcon style={{ color: theme.palette.info.main, fontSize: 72 }} {...props} />;
}
