import { useEditor } from "@/modules/editor";
import { css } from "@linaria/core";
import { string } from "vue-types";
import { useCompData } from ".";
import { Image, Text } from "../../../basicUI";
import { createUIComp } from "../../../defines/createUIComp";
import { watch } from "vue";

export const Component = createUIComp({
  props: {
    compId: string().isRequired,
  },
  setup(props) {
    const editor = useEditor();
    const { children, layout } = useCompData(props.compId);

    function clickArrow() {
      if (editor.store.isEditMode) return;
      document.scrollingElement?.scrollTo({
        top: document.documentElement.clientHeight,
      });
    }

    if (!editor.store.isEditMode) {
      watch(
        () => editor.store.compPids[props.compId],
        () => {
          const height =
            document.body.clientHeight * (750 / document.body.clientWidth);
          layout.size[1] = height;
          const compTrees = editor.helper.getCompTrees(props.compId);
          editor.helper.extendStreamCard(compTrees[1].id);
          const image = editor.helper.findComp(children.bg);
          image?.setH(height);
        }
      );
    }

    return () => {
      return (
        <div class="h-full">
          <Image.Component compId={children.bg} />
          <Text.Component class={titleCls} compId={children.title} />
          <div class={arrowCls} onClick={clickArrow}>
            ↓
          </div>
        </div>
      );
    };
  },
});

const titleCls = css`
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translateX(-50%) !important;
`;

const arrowCls = css`
  position: absolute;
  left: 50%;
  bottom: 21px;
  width: 35px;
  height: 35px;
  line-height: 35px;
  font-size: 18px;
  text-align: center;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50%;
  transform: translateX(-50%);
`;