---
import type { Status } from '../plugins/mastodon/types';

type Props = Status['poll'] & { class?: string};

const { class: className, ...poll } = Astro.props;

function calculatePercentage(votes: number, totalVotes: number) {
  return totalVotes > 0 ? (votes / totalVotes) * 100 : 0;
}

function timeLeft(untilDate: string): string {
  // Get the current date in UTC and set the time to start of the day
  const now = new Date();
  const currentDate = new Date(
    Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate()),
  );

  // Parse the target date and set the time to start of the day in UTC
  const targetDateTime = new Date(untilDate);
  const targetDate = new Date(
    Date.UTC(
      targetDateTime.getUTCFullYear(),
      targetDateTime.getUTCMonth(),
      targetDateTime.getUTCDate(),
    ),
  );

  // Calculate the difference in milliseconds
  const diffInMilliseconds = targetDate.getTime() - currentDate.getTime();

  if (diffInMilliseconds < 0) {
    return "Closed";
  }

  // Convert milliseconds to days
  const diffInDays = Math.ceil(diffInMilliseconds / (1000 * 60 * 60 * 24));

  return `${diffInDays} day${diffInDays !== 1 ? "s" : ""} left`;
}
---

<div class={className}>
  <ul class="list-none list-inside m-0 p-0">
    {
      poll.options.map((option) => {
        const percent = Math.round(
          calculatePercentage(option.votes_count || 0, poll.votes_count),
        );
        return (
          <li class="mb-5">
            <span class="mr-3">{percent}%</span>
            <span>{option.title}</span>
            <span
              class="bg-black block h-2 rounded"
              style={{ width: `${percent}%` }}
            />
          </li>
        );
      })
    }
  </ul>
  <span>{poll.voters_count} People</span> ·
  {poll.expires_at && <span>{timeLeft(poll.expires_at)}</span>}
</div>