import { raw } from "hono/html";
import isEmpty from "just-is-empty";
import type { RepostInfo } from "../../classes/repost";
import { CAN_EDIT_REPOST_RULES } from "../../config";
import type { BaseElementProps } from "../../types";
import { formatTimeFromHours } from "../../utils/time";

interface RepostStatusIconProps extends BaseElementProps {
  isRepost?: boolean;
};

export function RepostStatusIcon(props: RepostStatusIconProps) {
  if (props.isRepost === true) {
    return (
      <span class="repostStatus noselect">
        <img src="/icons/repost.svg" class="repostIcon" alt="reposted post icon" width="20px" height="20px" />
        <small>&nbsp;Reposted Post</small>
      </span>
    );
  }
  return null;
};

interface RepostCountProps extends BaseElementProps {
  id: string;
  count?: number;
  repostInfo?: RepostInfo[];
};

export function RepostCountElement(props: RepostCountProps) {
  if (props.count === undefined || props.count <= 0) {
    return null;
  }
  let repostInfoStr: string = "";
  if (!isEmpty(props.repostInfo)) {
    // Sort the repost info list
    const sortedData = props.repostInfo!.toSorted((a, b) => {
      if (a.time < b.time) return -1;
      if (a.time > b.time) return 1;
      return 0;
    });
    // and then traverse it for rendering
    for (const repostItem of sortedData) {
      if (repostItem.count >= 1) {
        const repostWrapper = `<span class="timestamp" repost="true">${repostItem.time.toString()}</span>`;
        if (repostItem.count == 1 && repostItem.hours == 0)
          repostInfoStr += `* Repost at ${repostWrapper}`;
        else
          repostInfoStr += `* Every ${formatTimeFromHours(repostItem.hours)}, ${repostItem.count} times from ${repostWrapper}`;
        repostInfoStr += "\n";
      }
    }
  }
  return (<> | <span class="repostTimesLeft" tabindex={0} data-placement="top">
    <span class="repostInfoData" hidden={true}>{raw(repostInfoStr)}</span>
    Reposts Left: {props.count}</span>
    <RepostEditorLink id={props.id} />
  </>);
};

interface RepostEditorLinkProps extends BaseElementProps {
  id: string;
}

function RepostEditorLink(props: RepostEditorLinkProps) {
  const id: string = props.id;
  if (!CAN_EDIT_REPOST_RULES) {
    return null;
  }
  return (<small>
    <span>
      <a class="clicker modify-repost"
      title="Modify repost rules"
      hx-disabled-elt=".modify-repost"
      hx-get={`/post/${id}/repost`}
      hx-target="body" hx-swap="beforeend">(Modify Reposts...)</a>
    </span>
  </small>);
};