import { customElement, property, state } from "lit/decorators.js";
import { FeedobellElement } from "../FeedobellElement";
import type { IPost } from "@feedobell/client";
import { getRelativeDate } from "../utils";
import calender from "../assets/calender.svg";
import { html } from "lit";
import { unsafeHTML } from "lit/directives/unsafe-html.js";

@customElement("feedobell-post")
export class Post extends FeedobellElement {
  @property({ attribute: "post" })
  post: IPost | undefined;

  @state()
  private _expanded: boolean = false;
  private _renderPostHeader = ({ post }: { post: IPost }) => {
    return html` <span
      class="text-xs bg-muted rounded-full inline-flex gap-1 items-center font-semibold"
    >
      <img
        src="${calender}"
        alt="Notifications"
        class="w-6 h-6 text-blue-600 cursor-pointer outline-none"
      />
      ${getRelativeDate(post?.createdAt)}
    </span>`;
  };

  private _readMore({
    html: content,
    previewLines,
  }: {
    html: string;
    previewLines?: number;
  }) {
    const shouldShowButton = false

    return html`
      <div>
        <div
          class="prose prose-sm max-w-none  [&>img]:rounded-lg [&>img]:my-2 custom-link-style transition-all duration-300 "
          style="
          --tw-prose-links: #1d4ed8;
          --tw-prose-links-hover: #2563eb;
          margin: 0;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            -webkit-line-clamp: ${this._expanded ? "unset" : previewLines};
          "
        >
          ${unsafeHTML(content)}
        </div>

        ${shouldShowButton
          ? html`
              <button
                @click=${() => (this._expanded = !this._expanded)}
                class="mt-2 text-blue-700 hover:underline text-sm cursor-pointer font-semibold"
              >
                ${this._expanded ? "Read less" : "Read more"}
              </button>
            `
          : ""}
      </div>
    `;
  }

  private _renderPostBody = ({ post }: { post: IPost }) => {
    return html` <h3 class="font-semibold text-lg text-foreground">
        ${this.post?.title || "Untitled"}
      </h3>
      ${this._readMore({ html: post?.htmlContent || "", previewLines: 10000000 })}`;
  };
  protected render() {
    if (!this.post) return null;
    return html`
      <div
        class="bg-white rounded-md p-4 mb-3 shadow-sm hover:shadow-lg transition-shadow duration-300"
      >
        ${this._renderPostHeader({ post: this.post })}
        ${this._renderPostBody({ post: this.post })}
      </div>
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    "feedobell-post": Post;
  }
}