import { toast } from 'react-toastify';
import { useTranslation } from 'react-i18next';
// Custom message component
const LoginMessage = (props: ToastLoginProps) => {
  const { t } = useTranslation();
  const handleClick = () => {
    const currentUrl = window.location.href;
    const redirect = encodeURIComponent(props?.redirectUrl || currentUrl);
    const loginUrl = props?.loginUrl || '/user/login/';
    const newUrl = location.origin + loginUrl + '?redirect=' + redirect;
    window.open(newUrl, '_self');
  };

  return (
    <div className='msg-container' onClick={handleClick} style={{ cursor: 'pointer' }}>
      <p className='msg-title'>{t('Please login')}</p>
      <p className='msg-description'>{t('Click here to go to the login page.')}</p>
    </div>
  );
};
type ToastLoginProps = {
  /**
   * 登录页面地址, /user/login
   */
  loginUrl?: string;
  /**
   * 登录成功后跳转的地址, 默认是当前页面
   */
  redirectUrl?: string;
};
/**
 * 登录提示
 * @param props
 * @example
 *      toastLogin({
 *        loginUrl: '/user/login/',
 *        redirectUrl: window.location.href,
 *      });
 */
export const toastLogin = (props: ToastLoginProps = {}) => {
  toast.info(<LoginMessage {...props} />);
};