import { watch } from "vue";
import { string } from "vue-types";
import { useCompData, useCreateChild } from ".";
import { Image, Text } from "../../../basicUI";
import { createUIComp } from "../../../defines/createUIComp";

export const Component = createUIComp({
  props: {
    compId: string().isRequired,
  },
  setup(props) {
    const { children, value } = useCompData(props.compId);
    const createList = useCreateChild("list");

    watch(
      () => [value.columns],
      () => {
        const { columns } = value;
        const offset = columns - children.list.length;
        if (offset > 0) {
          children.list.push(...createList(offset));
        } else {
          children.list.splice(columns, offset * -1);
        }
      }
    );

    return () => {
      return (
        <div class="flex">
          <div class="flex-1 mx-0.3rem leading-2 relative z-10 w-0">
            <Text.Component compId={children.text} class="mt-0.2rem" />
            <div class="flex mt-0.2rem flex-wrap mr-0.8rem ml-0.2rem">
              {children.list.map((d: any, i: number) => (
                <Image.Component
                  key={i}
                  compId={d}
                  class="-ml-0.2rem mb-0.2rem w-0.72rem h-0.72rem object-cover rounded-1/2 overflow-hidden"
                />
              ))}
            </div>
          </div>
          <div class="w-2.5rem relative pb-0.58rem mr-0.03rem">
            <Image.Component
              compId={children.img1}
              class="w-2.5rem h-4.17rem object-cover"
            />
            <div class="absolute bottom-0 right-1rem">
              <Image.Component
                compId={children.img2}
                class="w-3.17rem h-2.4rem object-cover"
              />
            </div>
          </div>
        </div>
      );
    };
  },
});