import { Icons } from './icons';

export function RegisterModal(props: { allowRegister: boolean }) {
  return (
    <div class="wm-modal" x-show="modals.register" x-cloak {...{ 'x-transition.opacity.duration.300ms': '' }}>
      <div class="wm-modal-mask" data-close-modal="register"></div>
      <section class="wm-modal-card auth-card" role="dialog" aria-modal="true" aria-labelledby="register-title">
        <button class="modal-close" type="button" data-close-modal="register" aria-label="关闭">{Icons.close()}</button>
        <h2 id="register-title">注册账号</h2>
        {props.allowRegister ? (
          <form data-auth-form="register">
            <label>
              <span>用户名</span>
              <input name="username" pattern="[a-zA-Z0-9_]{3,20}" maxlength={20} autocomplete="username" required />
            </label>
            <label>
              <span>邮箱</span>
              <input name="email" type="email" autocomplete="email" required />
            </label>
            <label>
              <span>昵称</span>
              <input name="displayName" maxlength={24} autocomplete="name" required />
            </label>
            <label>
              <span>密码</span>
              <input name="password" type="password" minlength={8} autocomplete="new-password" required />
            </label>
            <button class="primary-button" type="submit">注册并登录</button>
          </form>
        ) : (
          <p class="empty-state">已关闭注册</p>
        )}
        <p class="auth-switch">已有账号？<button type="button" data-switch-modal="login">登录</button></p>
      </section>
    </div>
  );
}
