import { customElement, property, state } from "lit/decorators.js";
import { FeedobellElement } from "../FeedobellElement";
import { voteAPI, type IPoll, type IPollOptions } from "@feedobell/client";
import Store from "../GlobalStore";
import { html } from "lit";
import { styleMap } from "lit/directives/style-map.js";
import { FeedobellEvent } from "../events/FeedobellEvent";
import { EventName } from "../events/types";

@customElement("feedobell-poll-option")
export class PollOption extends FeedobellElement {
  @property({ attribute: "poll", type: Object })
  poll: IPoll | undefined;

  @property({ attribute: "poll-option", type: Object })
  pollOption: IPollOptions | undefined;

  @property({ attribute: "total-votes", type: Number })
  totalVotes: number = 0;

  @property({attribute: "can-vote", type: Boolean})
  canVote: boolean = true;

  @state()
  private _hasVoted: boolean = false;

  @state()
  private _votePercentage: number = 0;

  private _onVoteEvent = new FeedobellEvent({name: EventName.OPTION_VOTED, data: {} }, {bubbles: true, composed: true} )
  updated(changedProps: Map<string, unknown>) {
    if (changedProps.has("pollOption") || changedProps.has("totalVotes")) {
      this._votePercentage =
        this.totalVotes > 0
          ? parseFloat(
              (((this.pollOption?.votes || 0) / this.totalVotes) * 100).toFixed(2)
            )
          : 0;
    }
  }

  private _updateVotePercentage() {
    this._votePercentage = 
      this.totalVotes > 0
        ? Math.round(((this.pollOption?.votes || 0) / this.totalVotes) * 100)
        : 0;
  }

  protected firstUpdated(): void {
    this._updateVotePercentage();
    this._hasVoted = this.pollOption?.hasVoted || false;
  }

  private _handleOnclick = () => {
    if (!this.poll || !this.pollOption || !this.canVote) return null;
    this._hasVoted = true;
    this.pollOption.votes = (this.pollOption?.votes || 0) + 1;
    this.dispatchEvent(this._onVoteEvent);
    voteAPI({
      projectId: Store.getProjectId(),
      userId: Store.getUserId(),
      pollId: this.poll?._id,
      pollOptionId: this.pollOption._id,
    });
  };

  private _barStyles = (percent: number) => {
    return {
      width: `${percent}%`,
      backgroundColor: "deepskyblue",
    };
  };

  private _renderPollOption() {
    if (!this.poll || !this.pollOption) return null;
    return html`
      <div class="flex flex-col my-1 cursor-pointer">
        <!-- Top message if voted -->
        ${this._hasVoted
          ? html`
              <div class="text-sm font-semibold text-white text-center flex justify-center">
                <p
                  class="w-[90%] px-1 border-t border-t-black rounded-t-[5px] border-b-0"
                  style="background-color: blue;"
                >
                  You have voted for this option
                </p>
              </div>
            `
          : ""}
  
        <!-- Regular poll option -->
        <div
          class="rounded-lg overflow-hidden border-2 border-solid"
          style=${`border-color: ${this._hasVoted ? 'blue' : '#3b82f6'}; border-width: ${this._hasVoted ? '4px' : '2px'};`}
          @click=${this._handleOnclick}
        >
          <div class="relative w-full">
            <!-- Progress bar -->
            <div
              class="absolute left-0 top-0 h-full transition-all duration-200"
              style=${styleMap(this._barStyles(this._votePercentage))}
            ></div>
  
            <!-- Poll content -->
            <div class="relative flex justify-between px-3 py-2">
              <span class="text-sm font-medium text-gray-800 break-words">
                ${this.pollOption.label}
              </span>
              <span class="text-sm font-semibold text-gray-700 ml-2">
                ${this._votePercentage}%
              </span>
            </div>
          </div>
        </div>
      </div>
    `;
  }

  protected render() {
    return html` ${this._renderPollOption()} `;
  }
}

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