import { LitElement, css, html } from 'lit';
import { property, customElement } from 'lit/decorators.js';
import { resolveRouterPath } from '../router';
import { Relay } from 'nostr-tools';
import { WindowNostr } from 'nostr-tools/nip07';
import '../img/default_pfp.png'

import '@shoelace-style/shoelace/dist/components/card/card.js';
import '@shoelace-style/shoelace/dist/components/button/button.js';

import { styles } from '../styles/shared-styles';

declare global {
  interface Window {
    nostr?: WindowNostr;
  }
}

@customElement('app-home')
export class AppHome extends LitElement {

  // For more information on using properties and state in lit
  // check out this link https://lit.dev/docs/components/properties/
  @property() message = 'Welcome to my nostr demo!';
  @property({ type: String }) nostrAddy = '';
  @property({ type: String }) bio = '';
  @property({ type: String }) profilePic = '';
  @property({ type: Boolean }) isSignedIn = false;
  @property({ type: String }) publicKey = '';


  static styles = [
    styles,
    css`
    #welcomeBar {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }

    #welcomeCard,
    #infoCard {
      padding: 18px;
      padding-top: 0px;
    }

    sl-card::part(footer) {
      display: flex;
      justify-content: flex-end;
    }

    @media(min-width: 750px) {
      sl-card {
        width: 70vw;
      }
    }


    @media (horizontal-viewport-segments: 2) {
      #welcomeBar {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
      }

      #welcomeCard {
        margin-right: 64px;
      }
    }

    /*
========================================
Profile Picture Container
========================================
*/
.profile-picture-container {
  display: grid;
  grid-template-columns: 200px 115px;
  grid-template-rows: 250px;
  grid-column-gap: 15px;
  margin-bottom: 12px;
}

.profile-picture-container p {
  margin: 0;
}

.profile-pic {
  grid-area: 1/1;
  margin-top: 10px;
  margin-bottom: 10px;
}

.personal-msg {
  grid-area: 1/2;
  margin: 0;
}



.pics-videos {
  grid-area: 1/1;
  justify-self: center;
  align-self: end;
}

  `];




  async firstUpdated() {
    // this method is a lifecycle even in lit
    // for more info check out the lit docs https://lit.dev/docs/components/lifecycle/
    console.log('This is your home page');
  }


  connectedCallback(): void {
    super.connectedCallback();
    this.addEventListener('user-signed-out', this.handlesSignOut.bind(this))
  }

handlesSignOut() {
  this.profilePic = '';
  this.bio = '';
  this.nostrAddy = 'Guest'
}

  disconnectedCallback(): void {
    super.disconnectedCallback();
    window.removeEventListener('profile-updated', this.updateProfileFromEvent.bind(this));
  }

  updateProfileFromEvent(event: Event) {
    const detail = (event as CustomEvent).detail;
    this.nostrAddy = detail.nostrAddy;
    this.bio = detail.bio;
    this.profilePic = detail.profilePic;
    this.isSignedIn = true;
    this.requestUpdate();
  }

  displayGuestView() {
    // Set initial values for guest view
    this.nostrAddy = '';
    this.bio = 'Welcome, guest! Please sign in with a browser extension to view your profile.';
    this.profilePic = ''; // Could be a placeholder image for guests
    this.isSignedIn = false;
  }




  share() {
    if ((navigator as any).share) {
      (navigator as any).share({
        title: 'PWABuilder pwa-starter',
        text: 'Check out the PWABuilder pwa-starter!',
        url: 'https://github.com/pwa-builder/pwa-starter',
      });
    }
  }







  render() {
    return html`
      <app-header></app-header>

      <main>
        <div id="welcomeBar">
          <sl-card id="welcomeCard">
            <div slot="header">
              <h2>Find me on any nostr client by searching ${this.nostrAddy || 'Guest'}</h2>
            </div>

            <p>
              You can use the Nostr protocol to transform your personal website into
              a micro social media client. It eliminates the need to use a corporate
              social media account. I am using nostr-tools to implement an extension
              sign in and pull notes from my personal relay.
            </p>

            <div class="profile-picture-container">
              ${this.profilePic
                ? html`<img class="profile-pic" src="${this.profilePic}" alt="Profile Picture" width="200px" height="200px">`
                : html`<img class="profile-pic" src="img/default_pfp.png" alt="Guest Profile Picture" width="200px" height="200px">`}

              <p class="personal-msg"><b>${this.bio || 'Welcome, guest! Please sign in to view your profile.'}</b></p>

              <p class="pics-videos">View My: <a href="#"><b>Pics</b></a> | <a href="#"><b>Videos</b></a></p>
            </div>

            ${'share' in navigator
              ? html`<sl-button slot="footer" variant="default" @click="${this.share}">
                        <sl-icon slot="prefix" name="share"></sl-icon>
                        Share this Starter!
                      </sl-button>`
              : null}
          </sl-card>

          <sl-button href="${resolveRouterPath('about')}" variant="primary">Navigate to About</sl-button>
          <sl-button href="${resolveRouterPath('note-wall')}" variant="primary">Navigate to Note Wall</sl-button>
        </div>
      </main>
    `;
  }




}
