import { css } from "@linaria/core";
import { defineComponent, onMounted, ref } from "vue";

import Dialog from "../list/dialog";
import { useList } from "@/modules/list";
import { DialogItem } from "@/modules/list/objects/item";

export default defineComponent({
  setup() {
    const { store, actions } = useList();

    const canvasRef = ref();

    const rootRef = ref<HTMLElement>();

    onMounted(() => {
      actions.on("getProfileData:success", async () => {
        const res = await actions.initListCanvasData(
          rootRef.value?.clientWidth as number,
          rootRef.value?.clientHeight as number
        );
        if (!res) {
          return;
        }
        actions.startListRunning(canvasRef.value);
      });
    });

    return () => (
      <div class={rootStyle} ref={rootRef}>
        <canvas ref={canvasRef} />

        {store.dialogs.map((item: DialogItem) => (
          <Dialog data={item} key={item.id} />
        ))}
      </div>
    );
  },
});

const rootStyle = css`
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  background-color: #3f322c;
  overflow: hidden;
  user-select: none;
  flex-flow: row;
  canvas {
    width: 100%;
    height: 100%;
    /* background-color: #fff; */
  }
`;
