<template>
    <div class="w_100 h_100 layout sterech gap30">
        <div class="left-zone">
            <div class="prompt-zone mb10">
                <div class="tabs layout center">
                    <button
                        v-for="tab in tabs"
                        :key="tab"
                        :class="{ active: activeTab === tab }"
                        @click="activeTab = tab"
                    >
                        {{ tab }}
                    </button>
                </div>
                <div class="tab-content">
                    <div class="layout center justify-center h_100" style="background-color: #ffffff; border-radius: 2rem;"  v-if="activeTab === 'Image Prompt'">
                        <div class="layout center center" style="flex-direction: column;">
                            <input type="file" name="" id="file" class="sr-only">
                            <span class="file-icon" id="file"><img src="../../../resources/img/content/ico_file.svg" alt=""></span>
                            <label for="file" style="text-align: center;">파일을 업로드하세요.</label>
                        </div>
                    </div>
                    <div class="h_100" v-else-if="activeTab === 'Text Prompt'">
                        <textarea class="form-control sm" style="height: 100%;" placeholder="텍스트를 입력하세요."></textarea>
                    </div>
                </div>
            </div>
            <div class="btn-zone gap10 mb30">
                <button class="btn md ico-before ico-reset">초기화</button>
                <button class="btn md ico-before ico-3d">3D 변환</button>
            </div>
            <div class="direction-zone mb30">
                <ul>
                    <li v-for="btn in buttons" :key="btn.icon" class="button-list">
                        <button class="layout center gap10">
                            <span class="icon-wrap"><img :src="btn.icon" :alt="btn.label + ' 아이콘'" ></span>
                            <span class="button-font"> {{ btn.label }}</span>
                        </button>
                    </li>
                </ul>
            </div>
            <div class="zoom-container" tabindex="0">
                <div class="zoom-controls">
                <button @click="decreaseZoom" aria-label="Zoom out">-</button>
                <input
                    type="range"
                    min="50"
                    max="200"
                    step="5"
                    v-model="zoom"
                    @input="updateZoom"
                    aria-label="Zoom level"
                />
                <button @click="increaseZoom" aria-label="Zoom in">+</button>
                </div>
                <div class="zoom-display">{{ zoom }}%</div>
            </div>
        </div>
        <div class="right-zone stretch">
            <div class="canvas-zone h_100">
                <div class="top-zone layout center space-between">
                <!-- 왼쪽 툴 -->
                    <ul class="toolbar left layout gap10">
                        <li
                            v-for="tool in subTolls.slice(0, 3)"
                            :key="tool.id"
                        >
                            <button :title="tool.title" @click="toggleTool(tool)">
                                <img :src="tool.icon" :alt="tool.title + ' 아이콘'" style="vertical-align: middle;"/>
                            </button>
                        </li>
                    </ul>

                    <!-- 오른쪽 툴 -->
                    <ul class="toolbar right layout gap10">
                        <li
                            v-for="tool in subTolls.slice(-4)"
                            :key="tool.id"
                            :class="{ active: activeToolId === tool.id && !activeSubToolId }"
                        >
                            <button :title="tool.title" @click="toggleTool(tool)">
                                <img :src="tool.icon" :alt="tool.title + ' 아이콘'" style="vertical-align: middle;"/>
                            </button>
                        </li>
                    </ul>
                </div>
                <div class="bottom-zone"></div>
            </div>
            <div class="equipment-zone h_100">
                <div class="button-collection h_100">
                    <ul>
                        <li
                            v-for="tool in tools"
                            :key="tool.id"
                            :class="{ active: activeToolId === tool.id && !activeSubToolId }"
                            >
                            <button
                                :title="tool.title"
                                @click="toggleTool(tool)"
                            >
                                <img :src="tool.icon" :alt="tool.title + ' 아이콘'" />
                                <input
                                        type="color"
                                        ref="colorInput"
                                        
                                        v-model="selectedColor"
                                        @input.stop
                                        v-if="tool.type === 'palette' && openedToolId === tool.id" class="palette-picker"
                                    />
                            </button>
                        <!-- 자식 버튼이 있을 경우 -->
                            <ul
                                v-if="tool.children && tool.children.length && openedToolId === tool.id"
                                class="child-buttons"
                            >
                                <li
                                v-for="child in tool.children"
                                :key="child.id"
                                :class="{ active: activeSubToolId === child.id }"
                                @click.stop="selectSubTool(tool, child)"
                                >
                                <button :title="child.title">
                                    {{ child.title }}
                                </button>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    data() {
        return {
            tabs: ['Image Prompt', 'Text Prompt', ],
            activeTab: 'Image Prompt',
            buttons: [
                { icon: require('../../../resources/img/content/ico_right.svg'), label: '오른쪽으로 90도 회전(R)' },
                { icon: require('../../../resources/img/content/ico_left.svg'), label: '왼쪽으로 90도 회전(L)' },
                { icon: require('../../../resources/img/content/ico_top_bottom.svg'), label: '상하 대칭' },
                { icon: require('../../../resources/img/content/ico_left_right.svg'), label: '좌우 대칭' }
            ],
            zoom: 100,
            tools: [
                {
                    id: 1,
                    icon: require('../../../resources/img/content/ico_move_w.svg'),
                    title: '이동도구',
                    children: []
                },
                {
                    id: 2,
                    icon: require('../../../resources/img/content/ico_3dview_w.svg'),
                    title: '크기조절도구',
                    children: []
                },
                {
                    id: 3,
                    icon: require('../../../resources/img/content/ico_copy_w.svg'),
                    title: '복사도구',
                    children: []
                },
                {
                    id: 4,
                    icon: require('../../../resources/img/content/ico_crop_w.svg'),
                    title: '복사도구',
                    children: [
                        {
                        id: 11,
                            title: '선택 객체 자르기'
                            },
                            {
                            id: 12,
                            title: '사용자 지정 자르기'
                        }
                    ]
                },
                {
                    id: 5,
                    icon: require('../../../resources/img/content/ico_punching_w.svg'),
                    title: '패스도구',
                    children: [
                        {
                        id: 51,
                            title: '원형 패스 도구'
                            },
                            {
                            id: 52,
                            title: '사각형 패스 도구'
                        }
                    ]
                },
                {
                    id: 6,
                    icon: require('../../../resources/img/content/ico_palette_w.svg'),
                    title: '팔레트 도구',
                    type: 'palette',
                    children: []
                },
                {
                    id: 7,
                    icon: require('../../../resources/img/content/ico_texture_w.svg'),
                    title: '재질 도구',
                    children: [
                         {
                        id: 71,
                        title: '금속 재질 도구'
                        },
                        {
                        id: 72,
                        title: '투명 재질 도구'
                        },
                                                 {
                        id: 73,
                        title: '플라스틱 재질 도구'
                        },
                        {
                        id: 74,
                        title: '목재 재질 도구'
                        }
                    ]
                },
                {
                    id: 8,
                    icon: require('../../../resources/img/content/ico_measure_w.svg'),
                    title: '길이 측정 도구',
                    children: []
                },
                 {
                    id: 9,
                    icon: require('../../../resources/img/content/ico_reset.svg'),
                    title: '초기화',
                    children: []
                },
            ],
            subTolls:[
                {
                    id: 1,
                    icon: require('../../../resources/img/content/ico_save_w.svg'),
                    title: '저장',
                },
                {
                    id: 2,
                    icon: require('../../../resources/img/content/ico_turnBack_w.svg'),
                    title: '뒤로 되돌리기',
                },
                {
                    id: 3,
                    icon: require('../../../resources/img/content/ico_trunFoward_w.svg'),
                    title: '앞으로 되돌리기',
                },
                                {
                    id: 4,
                    icon: require('../../../resources/img/content/ico_user_w.svg'),
                    title: '참여자',
                },
                                {
                    id: 5,
                    icon: require('../../../resources/img/content/ico_comment_w.svg'),
                    title: '코멘트',
                },
                                {
                    id: 6,
                    icon: require('../../../resources/img/content/ico_share_w.svg'),
                    title: '공유',
                },
                                {
                    id: 7,
                    icon: require('../../../resources/img/content/ico_close_w.svg'),
                    title: '닫기',
                },
            ],
            activeToolId: 1,
            activeSubToolId: null,
            openedToolId: null,
            selectedColor: '#000000'
        };
    },
    methods: {
        decreaseZoom() {
        if (this.zoom > 50) {
            this.zoom -= 5
        }
        },
        increaseZoom() {
        if (this.zoom < 200) {
            this.zoom += 5
        }
        },
        updateZoom(event) {
        this.zoom = Number(event.target.value)
        },
        toggleTool(tool) {
            if (tool.children && tool.children.length) {
                this.openedToolId = this.openedToolId === tool.id ? null : tool.id;
            } else {
                this.activeToolId = tool.id;
                this.activeSubToolId = null;
                this.openedToolId = tool.id;

                // 팔레트 도구일 경우 input을 강제 클릭
                if (tool.type === 'palette') {
                    this.$nextTick(() => {
                        this.$refs.colorInput?.click();
                    });
                }
            }
        },
        selectSubTool(tool, child) {
        this.activeToolId = tool.id;
        this.activeSubToolId = child.id;
        this.openedToolId = tool.id;
        }
    },
    watch: {},
    computed: {},
    components: {},
    created() {},
    mounted() {},
    beforeUnmount() {},
};

</script>