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";

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

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

    return () => {
      return (
        <div class="!<md:h-100vh !md:h-10.8rem">
          <Image.Component class="w-full h-full" 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%;
  width: 7rem;
  transform: translateX(-50%);
`;

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