import type { mastodon } from "masto";
import {
  For,
  Show,
  createResource,
  createSignal,
  type Component,
  type Ref,
} from "solid-js";
import CompactToot from "./CompactToot";
import { useTimeSource } from "../platform/timesrc";
import RegularToot from "./RegularToot";
import cardStyle from "../material/cards.module.css";
import { css } from "solid-styled";

type TootActions = {
  onBoost(client: mastodon.rest.Client, status: mastodon.v1.Status): void;
  onBookmark(client: mastodon.rest.Client, status: mastodon.v1.Status): void;
  onReply(client: mastodon.rest.Client, status: mastodon.v1.Status): void;
};

type ThreadProps = {
  ref?: Ref<HTMLElement>;
  client: mastodon.rest.Client;
  toots: readonly mastodon.v1.Status[];
  isExpended: (status: mastodon.v1.Status) => boolean;

  onItemClick(status: mastodon.v1.Status, event: MouseEvent): void;
} & TootActions;

const Thread: Component<ThreadProps> = (props) => {
  const boost = (status: mastodon.v1.Status) => {
    props.onBoost(props.client, status);
  };

  const bookmark = (status: mastodon.v1.Status) => {
    props.onBookmark(props.client, status);
  };

  const reply = (status: mastodon.v1.Status) => {
    props.onReply(props.client, status);
  };

  css`
    article {
      transition:
        margin 90ms var(--tutu-anim-curve-sharp),
        var(--tutu-transition-shadow);
      user-select: none;
      cursor: pointer;
    }

    .thread-line {
      position: relative;
      &::before {
        content: "";
        position: absolute;
        left: 36px;
        top: 16px;
        bottom: 0;
        background-color: var(--tutu-color-secondary);
        width: 2px;
        display: block;
      }
    }
  `;
  return (
    <article
      ref={props.ref}
      classList={{
        "thread-line": props.toots.length > 1,
      }}
    >
      <For each={props.toots}>
        {(status, index) => (
          <RegularToot
            data-status-id={status.id}
            data-thread-sort={index()}
            status={status}
            class={`${cardStyle.card}`}
            evaluated={props.isExpended(status)}
            actionable={props.isExpended(status)}
            onBookmark={(s) => bookmark(s)}
            onRetoot={(s) => boost(s)}
            onReply={(s) => reply(s)}
            onClick={[props.onItemClick, status]}
          />
        )}
      </For>
    </article>
  );
};

export default Thread;