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

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

    return () => (
      <div class="relative">
        <div class={upStyle}>
            <div class={style}>
            <Image.Component
                style={{
                width: designToNaturalSize(750),
                height: designToNaturalSize(464),
                }}
                compId={children.bgImg.id}
            />
            </div>

            <Image.Component
                class="!absolute  bottom-0 transform translate-x-1/4 translate-y-1/4 rounded-1/2 overflow-hidden"
                style={{
                
                width: designToNaturalSize(191),
                height: designToNaturalSize(191),
                }}
                compId={children.item1.id}
            />

            <Image.Component
                class="!absolute transform rounded-1/2 overflow-hidden -translate-x-1/2 bottom-0 left-1/2"
                style={{
                width: designToNaturalSize(191),
                height: designToNaturalSize(191),
                }}
                compId={children.item2.id}
            />
            
            <Image.Component
                class="!absolute bottom-0 right-0 rounded-1/2 overflow-hidden transform -translate-x-24/100 -translate-y-1/3"
                style={{
                width: designToNaturalSize(191),
                height: designToNaturalSize(191),
                }}
                compId={children.item3.id}
            />
        </div>

        <div class="absolute top-0 left-0">
          <Text.Component compId={children.text1.id} />
        </div>

    
        <Text.Component compId={children.text2.id}  />
      </div>
    );
  },
});
const upStyle = css`
  position:relative;
`
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);
`;