import { customElement, property } from "lit/decorators.js";
import {repeat} from 'lit/directives/repeat.js';
import { FeedobellElement } from "../FeedobellElement";
import { ContentTypes, type TContent } from "@feedobell/client";
import { html } from "lit";
import "../post/post.ts";
import "../poll/poll.ts";
@customElement("feedobell-sidebar")
export class FeedobellSidebar extends FeedobellElement {
  @property({ attribute: "is-open", type: Boolean })
  isOpen: boolean = false;

  @property({ attribute: "on-close" })
  onClose: () => void = () => {};

  @property({ attribute: "content", type: Array })
  content: Array<TContent> = [];

  @property({ attribute: "error-message" })
  errorMessage: string | null = null;

  @property({ attribute: "on-error-clear" })
  onErrorClear: () => void = () => {};

  @property({attribute: "is-content-loading",type: Boolean})
  isContentLoading: boolean = false;

  private _renderHeader() {
    return html`
      <div class="flex items-center justify-between p-4 bg-blue-600 text-white">
        <h2 class="text-lg font-semibold">Latest Updates</h2>
        <button
          @click=${this.onClose}
          class="cursor-pointer text-xl font-bold"
          aria-label="Close sidebar"
        >
          &times;
        </button>
      </div>
    `;
  }

  private _renderErrorMessage() {
    if (!this.errorMessage) return null;
    return html`
      <div
        class="flex items-center justify-between p-3 bg-red-100 border border-red-300 text-red-800 mx-2 my-2 rounded-md shadow-sm"
      >
        <span class="text-sm flex-1 pr-2">${this.errorMessage}</span>
        <button
          class="text-red-500 hover:text-red-700 font-bold text-lg cursor-pointer"
          @click=${this.onErrorClear}
          aria-label="Dismiss error"
        >
          &times;
        </button>
      </div>
      `;
  }

  private _renderFooter() {
    return html` <div
      class="p-3 text-sm text-center text-gray-700 bg-gray-100 "
    >
      Powered by
      <span
        class="font-medium underline cursor-pointer"
        @click=${() => window.open("https://www.feedobell.com", "_blank")}
      >
        Feedobell
      </span>
    </div>`;
  }

  private _renderLoading() {
    return html`
      <div class="flex justify-center items-center p-4">
        <div class="loader"></div>
      </div>
      <style>
        .loader {
          border: 4px solid #f3f3f3; /* Light gray */
          border-top: 4px solid #3b82f6; /* Blue (matches bell icon) */
          border-radius: 50%;
          width: 2rem;
          height: 2rem;
          animation: spin 1s linear infinite;
        }
  
        @keyframes spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
        }
      </style>
    `;
  }
  

  private _renderContent() {
    return repeat(
      this.content,
      (dt) => dt._id,
      (dt) => {
        if (dt.contentType === ContentTypes.POST) {
          return html`<feedobell-post .post=${dt}></feedobell-post>`;
        }
        if (dt.contentType === ContentTypes.POLL) {
          return html`<feedobell-poll .poll=${dt}></feedobell-poll>`;
        }
      }
    );
  }
  render() {
    return html`
      <div
        style="transform: translateX(${this.isOpen ? "0%" : "100%"})"
        class="
          fixed top-0 right-0 h-full shadow-xl z-50 transition-transform duration-300 ease-in-out
          flex flex-col bg-[#f9f9f9]
          w-1/4         
          max-lg:w-1/3  
          max-md:w-full 
        "
      >
        ${this._renderHeader()}
        ${this._renderErrorMessage()}
  
        <div
          class="flex-1 overflow-y-auto flex flex-col py-4 px-1.5 gap-1.5 bg-[#f9f9f9]"
        >
          ${this.isContentLoading ? this._renderLoading() : this._renderContent() }
        </div>
  
        ${this._renderFooter()}
      </div>
    `;
  }
}
  

declare global {
  interface HTMLElementTagNameMap {
    "feedobell-sidebar": FeedobellSidebar;
  }
}