<template>
  <div>
    <div id="content">
      <template v-if="selected === 'sign-in'">
        <ElAlert
          show-icon
          type="info"
        >
          For this example, anything entered in the "Company email" field will be considered an
          address that is eligible for SSO Sign in with Google. Empty the "Company email" field
          to see the standard Email and Password sign in page.
        </ElAlert>
        <AppSignIn
          v-bind="{
            linkForgot: { path: '/examples/authentication-pages/forgot-password' },
            linkTerms: { path: '/examples/authentication-pages/terms' },
            userInfo: { email: userInfo.email },
          }"
          :email.sync="userInfo.email"
          :password.sync="password"
          :remember-me.sync="rememberMe"
          :show-sso-method="!!userInfo.email.length"
        >
          <AppButton
            slot="ctaSubmit"
            :is-disabled="!userInfo.email || !password"
            :is-loading="isAuthorizing"
            type="primary"
            size="medium"
            text="Sign in"
            is-block
            no-branding
          />
          <AppButton
            slot="ctaSsoSubmit"
            :is-loading="isAuthorizing"
            type="primary"
            size="medium"
            text="Sign in with Hooli"
            is-block
            no-branding
          />
        </AppSignIn>
      </template>
      <AppForgotPasswordForm
        v-if="selected === 'forgot-password'"
        :project-id="'999'"
        :document-id="'999'"
        :link-login="'/examples/authentication-pages/login'"
        :link-redirect="'/examples/authentication-pages/'"
        :user-info="userInfo"
      />
      <AppTermsOfUse v-if="selected === 'terms'" />
      <AppRegisterForm
        v-if="selected === 'register'"
        :account-service="{}"
        :employer-name="'Goji Berry'"
        :invited-carriers="1"
        :link-login="'/examples/authentication-pages/login'"
        :project-id="'999'"
        :show-project-info="true"
        :submitted-carriers="7"
        :user-info="userInfo"
      />
      <AppRegisterConfirmation
        v-if="selected === 'register/confirmation'"
        :link-register="'/examples/authentication-pages/register'"
        :link-resend="'/examples/authentication-pages/register/resend-confirmation'"
        :user-info="userInfo"
      />
      <AppConfirmEmail
        v-if="selected === 'register/confirm-email'"
        :confirm-link-email="'/examples/authentication-pages/'"
      />
      <!-- register/resend-confirmation -->
      <AppResendConfirmation
        v-if="selected === 'register/resend-confirmation'"
        :account-service="{}"
        :link-confirmation="'/examples/authentication-pages/register/confirmation'"
        :link-login="'/examples/authentication-pages/login'"
        :link-register="'/examples/authentication-pages/register'"
        :project-id="'999'"
        :user-info="userInfo"
      />
      <!-- register/reset-password -->
      <AppResetPasswordForm
        v-if="selected === 'register/reset-password'"
        :account-service="{}"
      />
    </div>
  </div>
</template>

<script>
  export default {
    name: 'AuthenticationPages',
    data: () => ({
      btns: [
        { type: 'sign-in', text: 'Sign In Page' },
        { type: 'terms', text: 'Terms Of Use' },
        { type: 'register', text: 'Register' },
        { type: 'forgot-password', text: 'Forgot Password' },
        { type: 'forgot-password/email', text: 'Resend Forgot Password' },
        { type: 'register/confirmation', text: 'Confirmation' },
        { type: 'register/confirm-email', text: 'Confirm Email' },
        { type: 'register/resend-confirmation', text: 'Resend Confirmation' },
        { type: 'register/reset-password', text: 'Reset Password' },
      ],
      userInfo: {
        email: 'test@test.com',
      },
      password: '',
      rememberMe: false,
      isAuthorizing: false,
    }),
    computed: {
      /**
       * What page the user is currently on
       *
       * @returns {string}
       */
      selected() {
        return this.$route.path.split('authentication-pages/')[1];
      },
    },
  };
</script>

<style scoped lang="scss">
  ul {
    position: absolute;
    left: 0;
    top: 0;
    width: 300px;
    padding: 30px;
  }

  li {
    margin: 5px 0;
  }

  #title {
    margin: 10px 0;
    font: {
      weight: 700;
      size: 20px;
    }
  }
</style>
