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

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

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


@customElement('note-wall')
export class NoteWall extends LitElement {

@property({ type: Array }) notes: { content: string; date: string }[] = [];




  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;
      }
    }

    @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;
      }


    }

.comment-wall .main-section-header {
  margin-bottom: 3px;
}

.comment-wall .main-section-h2 {
  margin-bottom: 0;
}

#comment-counter {
  margin-top: 0;
  margin-left: 15px;
  margin-bottom: 3px;
}

.comment-wall table {
  margin: auto;
  margin-bottom: 5px;
}

.comment-wall th {
  background-color: rgb(255, 153, 51);
  width: 158px;
  padding: 3px;
  vertical-align: top;
}

.comment-wall td {
  vertical-align: top;
  background-color: rgb(249, 214, 180);
  width: 269px;
  padding: 3px;
}

.comment-wall figcaption,
.comment-wall figure {
  margin: 0;
}

.comment-wall figcaption {
  margin-bottom: 1em;
}

.comment-wall figure {
  margin-bottom: 49.33px;
}

.comment-wall h3 {
  font-size: 10pt;
  margin: 0;
  margin-bottom: 1em;
}

.comment-wall p {
  font-weight: normal;
  text-align: left;
  margin: 0;
}

#add-comment {
  text-align: right;
  margin-right: 10px;
  margin-bottom: 5px;
}


  `];

  note = ''; // store notes

  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('Here are some recent notes from the neighborhood');
  }

  async connectedCallback(): Promise<void> {
    super.connectedCallback();
  await Promise.all([
    this.fetchNotes(),

  ]);

}
  async fetchNotes() {
    const ifcaRelay = await Relay.connect('wss://hi.myvoiceourstory.org');
    const migsRelay = await Relay.connect('wss://notes.miguelalmodo.com');
    console.log(`connected to ${ifcaRelay.url}`);
    console.log(`connected to ${migsRelay.url}`);
    const eric = 'f8d17812ce41a9b145aede4f0720050ab63607f51688832b5d78c65d620ec7d9'
    const migs = 'ec965405e11a6a6186b27fa451a2ffc1396ede7883d2ea11c32fbd2c63996966'


    const sub = ifcaRelay.subscribe([
      {
        kinds: [1], // short form notes
        limit: 20,
        authors: [eric]
      }
    ], {
      onevent: (event) => {

        this.notes.push({
            content: event.content,
            date: new Date(event.created_at * 1000).toLocaleDateString()
      });
        this.requestUpdate();
        console.log(event)
      },
      oneose: () => {
        sub.close();

        this.requestUpdate();
      }
    });
  }


  share() {
    if ((navigator as any).share) {
      (navigator as any).share({
        title: 'Nostr Micro Client',
        text: 'Share this with your homie!',
        url: 'https://miguelalmodo.com',
      });
    }
  }

  render() {
    return html`
      <app-header ?enableBack="${true}"></app-header>
      <main> <div id="welcomeBar">
<sl-card id="WelcomeCard">
    <section class=""comment-wall>

    <header class="main-section-header">
            <h2 class="main-section-h2">Recent Notes from IFCA</h2>
    </header>




    <table>
        ${this.notes.map(note => {
          // Check if there's a URL in the content
          const urlMatch = note.content.match(/https?:\/\/[^\s]+/);
          const imageUrl = urlMatch ? urlMatch[0] : null;
          const textContent = note.content.replace(urlMatch?.[0] || '', '').trim();

          return html`
            <tr>
              <td><h3>${note.date}</h3></td>
              <td>
                <p>${textContent}</p>
                ${imageUrl ? html`<img src="${imageUrl}" alt="Note image" style="max-width: 30%; height: 30%;">` : ''}
              </td>
            </tr>
          `;
        })}
      </table>


    </section></main>
</sl-card>
    `;
  }
}
