import { html, TemplateResult, LitElement, nothing } from 'lit'
import { property } from 'lit/decorators.js'
import type { AuthProviders } from '@api-client/core/sdk/AuthSdk.js'
import { github, google, linkedin } from './icons.js'

/**
 * An App screen (HTML Element) allowing the user to log in via supported providers (Google, GitHub, LinkedIn).
 *
 * This component handles the UI for authentication options and the loading state.
 * It does not implement actual authentication logic but delegates it via events.
 *
 * @fires authenticate - Dispatched when the user clicks on one of the authentication buttons.
 *                       The detail object `CustomEvent<{ provider: AuthProviders }>` contains the selected provider.
 *
 * @example
 * ```html
 * <login-screen
 *   .loading="${this.isLoggingIn}"
 *   google
 *   linkedin
 *   github
 *   @authenticate="${this.handleLogin}"
 * ></login-screen>
 * ```
 */
export default class LoginScreen extends LitElement {
  /**
   * When true, shows a loading indicator instead of the login buttons.
   * Set this while the authentication request is in progress.
   */
  @property({ type: Boolean }) accessor loading = false

  /**
   * When set it renders the Google login button. Disabled by default.
   * @attribute
   */
  @property({ type: Boolean }) accessor google = false

  /**
   * When set it renders the LinkedIn login button. Disabled by default.
   * @attribute
   */
  @property({ type: Boolean }) accessor linkedin = false

  /**
   * When set it renders the GitHub login button. Disabled by default.
   * @attribute
   */
  @property({ type: Boolean }) accessor github = false

  /**
   * Dispatches the authentication event for the selected provider.
   *
   * @param provider The authentication provider to use.
   */
  protected dispatchAuth(provider: AuthProviders): void {
    this.dispatchEvent(
      new CustomEvent('authenticate', {
        detail: { provider },
        bubbles: false,
        composed: false,
      })
    )
  }

  protected authenticateGoogle(): void {
    this.dispatchAuth('google')
  }

  protected authenticateGithub(): void {
    this.dispatchAuth('github')
  }

  protected authenticateLinkedin(): void {
    this.dispatchAuth('linkedin')
  }

  protected override render(): unknown {
    return html`<div class="content">
      <div class="slide login-slide">${this.renderInto()} ${this.renderLoginForm()}</div>
    </div>`
  }

  protected renderInto(): TemplateResult {
    return html` <div class="intro">
      <h1 class="display-medium">Welcome to API Now!</h1>
      <p class="title-large">Sign in to your account.</p>
    </div>`
  }

  protected renderLoginForm(): TemplateResult {
    if (this.loading) {
      return this.renderCheckingUser()
    }
    return html`<div class="login">
      <p class="body-large">Sign up using</p>
      <div class="login-option">${this.renderGoogleButton()}</div>
      <div class="login-option">${this.renderGithubButton()}</div>
      <div class="login-option">${this.renderLinkedinButton()}</div>
    </div>`
  }

  protected renderCheckingUser(): TemplateResult {
    return html`<div class="login">
      <p class="body-large">Loading...</p>
      <ui-progress indeterminate class="login-progress"></ui-progress>
    </div>`
  }

  protected renderGoogleButton(): TemplateResult | typeof nothing {
    if (!this.google) {
      return nothing
    }
    return html`<ui-button class="auth-button google" color="outlined" @click="${this.authenticateGoogle}"
      >${google} Google</ui-button
    >`
  }

  protected renderGithubButton(): TemplateResult | typeof nothing {
    if (!this.github) {
      return nothing
    }
    return html`<ui-button class="auth-button github" color="outlined" @click="${this.authenticateGithub}"
      >${github} Github</ui-button
    >`
  }

  protected renderLinkedinButton(): TemplateResult | typeof nothing {
    if (!this.linkedin) {
      return nothing
    }
    return html`<ui-button class="auth-button linkedin" color="outlined" @click="${this.authenticateLinkedin}"
      >${linkedin} LinkedIn</ui-button
    >`
  }
}
