import { customElement, property, state } from "lit/decorators.js";
import { FeedobellElement } from "../FeedobellElement";
import type { IPoll, IPollOptions } from "@feedobell/client";
import { html, type PropertyValueMap } from "lit";
import calender from "../assets/calender.svg";
import vote from "../assets/vote.svg";
import { getRelativeDate } from "../utils";
import "./pollOption";
import { EventName, type IEvent } from "../events/types";

@customElement("feedobell-poll")
export class Poll extends FeedobellElement {
  @property({ attribute: "poll" })
  poll: IPoll | undefined;

  @state()
  private _totalVotes: number = 0;

  @state()
  private _canVote: boolean = true;

  private _handleOptionVoted(e: CustomEvent<IEvent<EventName.OPTION_VOTED>>) {
    const {name} = e.detail;
    if(name !== EventName.OPTION_VOTED){
      return; 
    }
    this._totalVotes += 1;
    this._canVote = false;
  }

  protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
    if(!this.poll) return;
      this._totalVotes = this.poll.pollOptions.reduce((acc, cur) => acc + (cur.votes || 0), 0);
      this._canVote = !(this.poll.pollOptions.some((opt) => opt?.hasVoted ));
  }

  private _renderPollHeader = ({ poll }: { poll: IPoll }) => {
    return html` <span
      class="text-xs text-muted-foreground 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(poll?.createdAt)}
    </span>`;
  };

  private _renderPollOption() {
    if (!this.poll) return null;
    return this.poll.pollOptions.map(
      (opt) =>
        html`<feedobell-poll-option
          .poll=${this.poll}
          .pollOption=${opt}
          .totalVotes=${this._totalVotes}
          .canVote=${this._canVote}
          @OPTION_VOTED=${this._handleOptionVoted}
        ></feedobell-poll-option>`
    );
  }

  private _renderPollBody({ poll }: { poll: IPoll }) {
    const options: IPollOptions[] = (poll?.pollOptions || []).filter(
      (o: IPollOptions) => !o.isDeleted
    );

    return html`
    <div class="w-full">
      <h3 class="font-semibold text-lg text-foreground mb-4">
        ${this.poll?.title}
      </h3>
  
      <div class="space-y-3">
        ${options.length === 0
          ? html`<div
              class="rounded-lg border border-dashed p-3 text-center text-sm text-muted-foreground"
            >
              No options available.
            </div>`
          : this._renderPollOption()}
      </div>
  
      <span
        class="text-xs text-muted-foreground bg-muted rounded-full inline-flex gap-1 items-center font-semibold"
      >
        <img
          src="${vote}"
          alt="Notifications"
          class="w-6 h-6 text-blue-600 cursor-pointer outline-none"
        />
        ${this._totalVotes} votes
      </span>
    </div>
  `;
  }

  protected render() {
    if (!this.poll) return null;
    return html`
      <div
        class="bg-white rounded-md p-4 mb-3 shadow-sm hover:shadow-lg transition-shadow duration-300"
      >
        ${this._renderPollHeader({ poll: this.poll })}
        ${this._renderPollBody({ poll: this.poll })}
      </div>
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    "feedobell-poll": Poll;
  }
}