    import { component$, useStylesScoped$ , useVisibleTask$ } from "@builder.io/qwik";

    interface FurnitureItem {
    image_path: string;
    x: number;
    y: number;
    size?: "one" | "two"; // 크기 구분 (one = 70px, two = 140px)
    }

    interface AvatarItem {
    avatar_type: {name: string, path: string};
    top_clothe_type: {name: string, path: string};
    bottom_clothe_type: {name: string, path: string};
    }

    interface ShowRoomGridProps {
    roomSrc: string;            // 방 배경
    furnitures: FurnitureItem[]; // 가구 리스트
    avatars: AvatarItem;       // 아바타 이미지 리스트
    }

    export default component$((props: ShowRoomGridProps) => {
        console.log(props.roomSrc);
        console.log(props.furnitures);
        console.log(props.avatars + " avatars");
        useStylesScoped$(STYLES);
        useVisibleTask$(() => {
        
        });
    return (
        <div class="room-wrapper">
        {/* 배경 */}
        <img src={"http://localhost:8000/public/room/"+props.roomSrc+".png"} class="room" />

        {/* 10x10 격자 */}
        <div class="grid-overlay">
            {Array.from({ length: 100 }).map((_, idx) => {
            const item = props.furnitures.find((f) => f.x + f.y*10 === idx);
            console.log(item);    
            return (
                <div
                key={idx}
                // class={
                // item?.size === "one"
                //     ? "oneone"
                //     : item?.size === "two"
                //     ? "twoone"
                //     : undefined
                // }
                // style={
                // item?.size === "two"
                //     ? { gridColumn: `span 2`, gridRow: `span 1` }
                //     : undefined
                // }   
            >
                {item && <img src={"http://localhost:8000/" + item.image_path} />}
            </div>
            );
            })}
        </div>

        {/* 아바타 */}
        <div class="avatar-wrapper">
            
            <img src={"http://localhost:8000/"+props.avatars.avatar_type.path} />
            <img src={"http://localhost:8000/"+props.avatars.top_clothe_type.path} />
            <img src={"http://localhost:8000/"+props.avatars.bottom_clothe_type.path} />
        </div>
        </div>
    );
    });

    const STYLES = `
    .room-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 700px;
        height: 700px;
        position: relative;
        }
        .room {
        position: absolute;
        z-index: 1 !important;
        width: 100%;
        height: 100%;
        image-rendering: pixelated;
        }

        .grid-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 700px;
        height: 700px;
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows: repeat(10, 1fr);
        z-index: 2;
        pointer-events: none;
        }
        .grid-overlay div {
        /* border: 1px solid rgba(0,0,0,0.2);  */
        box-sizing: border-box;
        width: 70px;
        height: 70px;
        position: relative;
        }
        .grid-overlay div>img {
            width: 70px;
            height: 70px;
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 100%;
            image-rendering: pixelated;

        }
        //  .grid-overlay div.oneone > img {
        //  width: 140px;
        //  image-rendering: pixelated;
        //  position: absolute;
        //  bottom: 0;
        //  }
        // .grid-overlay div.twoone > img {
        //  width: 140px;
        //  image-rendering: pixelated;
        //  position: absolute;
        //  transform: translate(-50%, -50%);
        //  }
        .avatar-wrapper {
        width: 150px;
        height: 150px;
        position: absolute;
        top: 70%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 99;
        }
        .avatar-wrapper img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        image-rendering: pixelated;
        z-index: 99;
        }
    `;