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

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

    const designToNaturalSize = helper.designToNaturalSize;
    function fixedSize(id:string, w:number, h:number)
    { 
        const item1Comp = store.compMap[id]
        if ( !item1Comp ) return;

        if (item1Comp.layout.size) {
          const isDefault = item1Comp.layout.size[0] == 750 && item1Comp.layout.size[1] == 400
          if (isDefault) {
            item1Comp.layout.size[0] = w;
            item1Comp.layout.size[1] = h;
          }
        }
    }

    function upgrade() {
      const item1Comp = store.compMap[children.item1]
      if ( !item1Comp.layout.transformMatrix) {
        item1Comp.layout.transformMatrix = "matrix(1,0,0,1, 40, 170)"
        item1Comp.layout.position = "absolute";
      }

      const item2Comp = store.compMap[children.item1]
      if ( !item2Comp.layout.transformMatrix) {
        item2Comp.layout.transformMatrix = "matrix(1, 0, 0, 1, 153, 136)",
        item2Comp.layout.position = "absolute";
      }

      const item3Comp = store.compMap[children.item1]
      if ( !item3Comp.layout.transformMatrix) {
        item3Comp.layout.transformMatrix = "matrix(1, 0, 0, 1, 269, 100)",
        item3Comp.layout.position = "absolute";
      }
    }
    upgrade();

    fixedSize(children.item1, 191, 191);
    fixedSize(children.item2, 191, 191);
    fixedSize(children.item3, 191, 191);


    return () => (
      <div class="absolute">
          <div class={style}>
            <Image.Component compId={children.bgImg} />
          </div>

          <Image.Component
                class="rounded-1/2 overflow-hidden top-0"
                editlayer = {false}
                compId={children.item1}
              />

            <Image.Component
                      class="rounded-1/2 overflow-hidden top-0"
                      compId={children.item2}
                      editlayer = {false}
                    />   

          <Image.Component
                  class="rounded-1/2 overflow-hidden top-0"
                  compId={children.item3}
                  editlayer = {false}
              />

        <Text.Component compId={children.text1} class={"top-0"} />
        
        <Text.Component compId={children.text2} class={"top-0"} />
      </div>
    );
  },
});

const style = css`
  background: gray;
  clip-path: polygon(0 0, 100% 0, 100% 57%, 0 100%);
`;