import type { Post } from "../classes/post";
import { EmbedDataType } from "../enums";
import { MAX_LENGTH } from "../limits";
import type { BaseElementProps } from "../types";
import { isAltEditableType } from "../utils/helpers";
import { PostContent } from "./post";

interface EditedPostProps extends BaseElementProps {
  post: Post;
};

export function PostAltTextEdit(props: EditedPostProps) {
  const post: Post = props.post;
  let num = -1;
  const embedAltTextEdit = post.embedContent?.map((embedData) => {
    ++num;
    if (!isAltEditableType(embedData.type))
      return;

    const thumbURL = (embedData.type == EmbedDataType.Video) ? "thumbs/video.png" : `preview/file/${embedData.content}`;
    return (<div class="editAltBlock" alteditfor={embedData.content}>
      <img width="120px" height="120px" class="editThumbPreview" src={thumbURL} /><br />
      <center>
        <input type="hidden" name={`altEdits.${num}.content`} value={embedData.content} />
        <input type="hidden" data-alt={true} name={`altEdits.${num}.alt`} value={embedData.alt} />
        {/* Accessible handlers will be added in via the htmx header */}
        <a tabindex={0} role="button" data-file={embedData.content}
          class="editPostAlt secondary outline">Edit Alt</a>
      </center>
    </div>);
  });

  const altEditBlock = embedAltTextEdit;
  if (altEditBlock?.at(0) === undefined || altEditBlock.length <= 0) {
    return null;
  }

  return (<section>
    <header><small>Embed Edits</small></header>
    <hr />
    <div class="alt-editors">
      {altEditBlock}
    </div>
    <hr />
  </section>);
}

export function PostEdit(props: EditedPostProps) {
  const post: Post = props.post;
  // If this post is posted, just show the same object again.
  if (post.posted) {
    return (<PostContent post={post} />);
  }

  // yeah these are kind egregious...
  const editSpinner: string = `editSpinner-${post.uuid}`;
  const editResponse: string = `editResponse-${post.uuid}`;
  const editPostField: string = `edit-${post.uuid}`;
  const editCountId: string = `editCount-${post.uuid}`;
  const postFormId: string = `editPost-${post.uuid}`;

  return (<form id={postFormId}
    hx-ext="form-json" hx-post={`/post/edit/${post.uuid}`} hx-target={`#${editResponse}`}
    hx-swap="innerHTML swap:0.2s" hx-indicator={`#${editSpinner}`}>

    <section>
      <textarea autofocus name="content" id={editPostField} rows={6} tabindex={0} required>
        {post.content}
      </textarea>
      <small>Character Count: <span id={editCountId}>0/{MAX_LENGTH}</span></small>
    </section>

    <PostAltTextEdit post={post} />
    <progress id={editSpinner} class="htmx-indicator" />
    <center class="postControls">
      <div id={editResponse}>
      </div>
      <button tabindex={0}>Update Post</button>
      <a tabindex={0} role="button" class="secondary cancelEditButton"
      hx-swap="innerHTML swap:0.2s" hx-get={`/post/edit/${post.uuid}/cancel`}
      hx-confirm="Are you sure you want to cancel editing?">Cancel</a>
    </center>
  </form>);
};