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

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

    return () => (
      <div class="relative">
        <div class="relative">
          <div class={style}>
            <Image.Component
              style={{
                width: designToNaturalSize(750),
                height: designToNaturalSize(464),
              }}
              compId={children.bgImg}
            />
          </div>
          <div
            class="absolute bottom-0 w-1/1 pl-40px pr-10px flex items-end justify-between transform translate-y-1/3"
            style={{
              height: designToNaturalSize(191),
              // marginBottom: designToNaturalSize(191 / 2),
            }}
          >
            <Image.Component
              class="rounded-1/2 overflow-hidden"
              style={{
                width: designToNaturalSize(191),
                height: designToNaturalSize(191),
                // marginTop: designToNaturalSize(191 / 3),
              }}
              compId={children.item1}
            />

            <Image.Component
              class="rounded-1/2 overflow-hidden"
              style={{
                width: designToNaturalSize(191),
                height: designToNaturalSize(191),
                marginBottom: designToNaturalSize(191 / 3),
              }}
              compId={children.item2}
            />

            <Image.Component
              class="rounded-1/2 overflow-hidden"
              style={{
                width: designToNaturalSize(191),
                height: designToNaturalSize(191),
                marginBottom: designToNaturalSize((191 / 3) * 2),
              }}
              compId={children.item3}
            />
          </div>
        </div>
        <div class="absolute top-50px left-0 z-1">
          <Text.Component compId={children.text1} />
        </div>
        <Text.Component compId={children.text2} class="mt-15px" />
      </div>
    );
  },
});

const style = css`
  background: gray;
  clip-path: polygon(0 0, 100% 0, 100% 57%, 0 100%);
  transform-origin: center;
  transform: translate(0%, 0%) scale(1);
`;
