import { __esDecorate, __runInitializers } from "tslib";
import { html, LitElement, nothing } from 'lit';
import { property } from 'lit/decorators.js';
import { github, google, linkedin } from './icons.js';
let LoginScreen = (() => {
    let _classSuper = LitElement;
    let _loading_decorators;
    let _loading_initializers = [];
    let _loading_extraInitializers = [];
    let _google_decorators;
    let _google_initializers = [];
    let _google_extraInitializers = [];
    let _linkedin_decorators;
    let _linkedin_initializers = [];
    let _linkedin_extraInitializers = [];
    let _github_decorators;
    let _github_initializers = [];
    let _github_extraInitializers = [];
    return class LoginScreen extends _classSuper {
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _loading_decorators = [property({ type: Boolean })];
            _google_decorators = [property({ type: Boolean })];
            _linkedin_decorators = [property({ type: Boolean })];
            _github_decorators = [property({ type: Boolean })];
            __esDecorate(this, null, _loading_decorators, { kind: "accessor", name: "loading", static: false, private: false, access: { has: obj => "loading" in obj, get: obj => obj.loading, set: (obj, value) => { obj.loading = value; } }, metadata: _metadata }, _loading_initializers, _loading_extraInitializers);
            __esDecorate(this, null, _google_decorators, { kind: "accessor", name: "google", static: false, private: false, access: { has: obj => "google" in obj, get: obj => obj.google, set: (obj, value) => { obj.google = value; } }, metadata: _metadata }, _google_initializers, _google_extraInitializers);
            __esDecorate(this, null, _linkedin_decorators, { kind: "accessor", name: "linkedin", static: false, private: false, access: { has: obj => "linkedin" in obj, get: obj => obj.linkedin, set: (obj, value) => { obj.linkedin = value; } }, metadata: _metadata }, _linkedin_initializers, _linkedin_extraInitializers);
            __esDecorate(this, null, _github_decorators, { kind: "accessor", name: "github", static: false, private: false, access: { has: obj => "github" in obj, get: obj => obj.github, set: (obj, value) => { obj.github = value; } }, metadata: _metadata }, _github_initializers, _github_extraInitializers);
            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        #loading_accessor_storage = __runInitializers(this, _loading_initializers, false
        /**
         * When set it renders the Google login button. Disabled by default.
         * @attribute
         */
        );
        /**
         * When true, shows a loading indicator instead of the login buttons.
         * Set this while the authentication request is in progress.
         */
        get loading() { return this.#loading_accessor_storage; }
        set loading(value) { this.#loading_accessor_storage = value; }
        #google_accessor_storage = (__runInitializers(this, _loading_extraInitializers), __runInitializers(this, _google_initializers, false
        /**
         * When set it renders the LinkedIn login button. Disabled by default.
         * @attribute
         */
        ));
        /**
         * When set it renders the Google login button. Disabled by default.
         * @attribute
         */
        get google() { return this.#google_accessor_storage; }
        set google(value) { this.#google_accessor_storage = value; }
        #linkedin_accessor_storage = (__runInitializers(this, _google_extraInitializers), __runInitializers(this, _linkedin_initializers, false
        /**
         * When set it renders the GitHub login button. Disabled by default.
         * @attribute
         */
        ));
        /**
         * When set it renders the LinkedIn login button. Disabled by default.
         * @attribute
         */
        get linkedin() { return this.#linkedin_accessor_storage; }
        set linkedin(value) { this.#linkedin_accessor_storage = value; }
        #github_accessor_storage = (__runInitializers(this, _linkedin_extraInitializers), __runInitializers(this, _github_initializers, false
        /**
         * Dispatches the authentication event for the selected provider.
         *
         * @param provider The authentication provider to use.
         */
        ));
        /**
         * When set it renders the GitHub login button. Disabled by default.
         * @attribute
         */
        get github() { return this.#github_accessor_storage; }
        set github(value) { this.#github_accessor_storage = value; }
        /**
         * Dispatches the authentication event for the selected provider.
         *
         * @param provider The authentication provider to use.
         */
        dispatchAuth(provider) {
            this.dispatchEvent(new CustomEvent('authenticate', {
                detail: { provider },
                bubbles: false,
                composed: false,
            }));
        }
        authenticateGoogle() {
            this.dispatchAuth('google');
        }
        authenticateGithub() {
            this.dispatchAuth('github');
        }
        authenticateLinkedin() {
            this.dispatchAuth('linkedin');
        }
        render() {
            return html `<div class="content">
      <div class="slide login-slide">${this.renderInto()} ${this.renderLoginForm()}</div>
    </div>`;
        }
        renderInto() {
            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>`;
        }
        renderLoginForm() {
            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>`;
        }
        renderCheckingUser() {
            return html `<div class="login">
      <p class="body-large">Loading...</p>
      <ui-progress indeterminate class="login-progress"></ui-progress>
    </div>`;
        }
        renderGoogleButton() {
            if (!this.google) {
                return nothing;
            }
            return html `<ui-button class="auth-button google" color="outlined" @click="${this.authenticateGoogle}"
      >${google} Google</ui-button
    >`;
        }
        renderGithubButton() {
            if (!this.github) {
                return nothing;
            }
            return html `<ui-button class="auth-button github" color="outlined" @click="${this.authenticateGithub}"
      >${github} Github</ui-button
    >`;
        }
        renderLinkedinButton() {
            if (!this.linkedin) {
                return nothing;
            }
            return html `<ui-button class="auth-button linkedin" color="outlined" @click="${this.authenticateLinkedin}"
      >${linkedin} LinkedIn</ui-button
    >`;
        }
        constructor() {
            super(...arguments);
            __runInitializers(this, _github_extraInitializers);
        }
    };
})();
/**
 * 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 LoginScreen;
//# sourceMappingURL=LoginScreen.js.map