import { component$, useStylesScoped$, Signal } from "@builder.io/qwik";
import { typechecker } from "~/utils/func";

interface FurnitureItem {
furniture_name: string;
image_path: string;
x: number;
y: number;
}

interface SetAvatarType {
  avatar_type: string;
  top_clothe_type: string;
  bottom_clothe_type: string;
}
export default component$(({roomSrc, furnitures, avatars}: {roomSrc: Signal<string>, furnitures: Signal<FurnitureItem[]>, avatars: Signal<SetAvatarType>}) => {
    console.log(roomSrc.value);
    console.log(furnitures.value);
    console.log(avatars.value + " avatars");
    useStylesScoped$(STYLES);
    
return (
    <div class="room-wrapper">
    {/* 배경 */}
    <img src={"http://localhost:8000/public/room/"+roomSrc.value+".png"} class="room" />

    {/* 10x10 격자 */}
    <div class="grid-overlay">
        {Array.from({ length: 100 }).map((_, idx) => {
        const item = furnitures.value.find((f: FurnitureItem) => f.x + f.y*10 === idx);
        console.log(item);    
        return (
            <div
            key={idx+1}
        >
            {item && <img src={"http://localhost:8000/" + item.image_path} />}
        </div>
        );
        })}
    </div>

    {/* 아바타 */}
    <div class="avatar-wrapper">
        
        <img src={"http://localhost:8000/"+typechecker(avatars.value.avatar_type)} />
        <img src={"http://localhost:8000/"+typechecker(avatars.value.top_clothe_type)} />
        <img src={"http://localhost:8000/"+typechecker(avatars.value.bottom_clothe_type)} />
    </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;
    }
`;