import formatDateTime from '@utils/formatDateTime';
import { LitElement, css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';

import '@components/MarkdownContent';

@customElement('arx-forum-post')
export class ForumPost extends LitElement {
  @property({ type: String }) override id = '';
  @property({ type: String }) topicId = '';
  @property({ type: String }) npub = '';
  @property({ type: Date }) date = new Date();
  @property({ type: String }) content = '';

  static override styles = [
    css`
      .post {
        grid-column: span 2;
        display: grid;
        grid-template-columns: subgrid;

        gap: 1rem;
        padding: 1.5em;
        background: oklch(from var(--accent) l c h / 0.4);

        & > :first-child {
          padding-right: 1.5rem;
          border-right: 2px solid var(--border);
        }
      }

      .post-content {
        display: grid;
        gap: 1em;

        & > :first-child {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          border-top: 2px solid var(--border);
          border-bottom: 2px solid var(--border);
          padding: 1em;
        }

        & > :nth-child(2) {
          margin-bottom: 1em;
        }

        & > :nth-child(3) {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 1em;
          border-top: 2px solid var(--border);
          padding: 1em;

          @media (max-width: 400px) {
            grid-template-columns: 1fr;
          }
        }
      }

      .disabled {
        pointer-events: none;
        opacity: 0.5;
      }
    `,
  ];

  override render() {
    const permalink = `eve://phora/topics/${this.topicId}#post-${this.id}`;

    return html`
      <div class="post" id="post-${this.id}">
        <arx-nostr-profile
          .npub=${this.npub}
          renderType="large"
        ></arx-nostr-profile>
        <div class="post-content">
          <div>
            <iconify-icon icon="mdi:clock"></iconify-icon>
            ${formatDateTime(this.date)}
          </div>
          <div>
            <arx-markdown-content
              .content=${this.content || 'no content'}
            ></arx-markdown-content>
          </div>
          <div>
            <arx-phora-button
              href="#"
              @click=${() => alert('TODO')}
              class="disabled"
            >
              <iconify-icon size="32" icon="mdi:reply"></iconify-icon>
              Reply
            </arx-phora-button>
            <arx-phora-button href=${permalink}>
              <iconify-icon size="32" icon="mdi:link"></iconify-icon>
              Permalink
            </arx-phora-button>
            <arx-phora-button
              href="#"
              @click=${() => alert('TODO')}
              class="disabled"
            >
              <iconify-icon size="32" icon="bxs:zap"></iconify-icon>
              Zap
            </arx-phora-button>
            <arx-phora-button
              href="#"
              @click=${() => alert('TODO')}
              class="disabled"
            >
              <iconify-icon
                size="32"
                icon="bi:cloud-lightning-rain-fill"
              ></iconify-icon>
              Downzap
            </arx-phora-button>
          </div>
        </div>
      </div>
    `;
  }
}