import * as React from "react"
import { ModalDialogContainer } from "../ModalDialog"
import { Header, HeaderSize } from "../Header"
import { Primary, Secondary } from "../Button"
import withTranslate from "jamplay-common/i18n/withTranslate"
import { Link } from "jamplay-common/routing"

interface LoginDialogPropTypes {
  onClose?: () => void
  text?: string
}
type LoginDialog = React.SFC<LoginDialogPropTypes>
export const LoginDialog: LoginDialog = withTranslate(
  (props: LoginDialogPropTypes & { t: any }) => {
    const { t } = props
    return (
      <ModalDialogContainer>
        <div className="dialog">
          <div className="content">
            <Header size={HeaderSize.one} style={{ marginBottom: 8 }}>
              {t("login/must-login")}
            </Header>
            <p
              style={{ fontSize: 18 }}
              dangerouslySetInnerHTML={{
                __html: props.text || t("login/dialog-description")
              }}
            />
            <div className="action">
              <Secondary onClick={props.onClose}>{t("cancel")}</Secondary>
              <Link.Login params={{ asPath: window.location.href}}>
                <a>
                  <Primary>{t("login/go-to-login-page-label")}</Primary>
                </a>
              </Link.Login>
            </div>
          </div>
        </div>
      </ModalDialogContainer>
    )
  }
)