<script setup lang="ts">
import ModeSwitch from "./ModeSwitch.vue";
import PageNavButton from "./PageNavButton.vue";
import PageIndicator from "./PageIndicator.vue";
import FullscreenButton from "./FullscreenButton.vue";

defineProps<{
    animation: boolean;
    currentPage: number;
    maxPage: number;
    clientType: "pc" | "ipad" | "mobile";
}>();

const emit = defineEmits<{
    modeChange: [mode: boolean];
    pageChange: [page: number];
    prevPage: [];
    nextPage: [];
    fullscreen: [];
}>();

const handleModeChange = (mode: boolean) => {
    emit('modeChange', mode);
};

const handlePageChange = (page: number) => {
    emit('pageChange', page);
};

const handlePrevPage = () => {
    emit('prevPage');
};

const handleNextPage = () => {
    emit('nextPage');
};

const handleFullscreen = () => {
    emit('fullscreen');
};
</script>

<template>
    <div class="ppt-controls">
        <ModeSwitch 
            :value="animation" 
            :client-type="clientType" 
            @change="handleModeChange" 
        />
        <div :class="['ppt-controls__navigation', `ppt-controls__navigation--${clientType}`]">
            <PageNavButton 
                :client-type="clientType" 
                :type="'prev'" 
                @click="handlePrevPage" 
            />
            <PageIndicator 
                :value="currentPage" 
                :max-page="maxPage" 
                :client-type="clientType" 
                @change="handlePageChange" 
            />
            <PageNavButton 
                :client-type="clientType" 
                :type="'next'" 
                @click="handleNextPage" 
            />
        </div>
        <FullscreenButton 
            v-if="clientType === 'pc'" 
            @click="handleFullscreen" 
        />
        <div v-else :class="['ppt-controls__spacer', `ppt-controls__spacer--${clientType}`]"></div>
    </div>
</template>

<style>
.ppt-controls {
    display: flex;
    justify-content: space-between;
}

.ppt-controls__navigation {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* PC 端导航控件 */
.ppt-controls__navigation--pc {
    gap: 8px;
}

/* iPad 端导航控件 */
.ppt-controls__navigation--ipad {
    gap: 16px;
}

/* 移动端导航控件 */
.ppt-controls__navigation--mobile {
    gap: 16px;
}

/* PPT 引擎占位符 */
.ppt-controls__spacer {
    visibility: hidden;
}

.ppt-controls__spacer--pc {
    width: 92px;
}

.ppt-controls__spacer--ipad {
    width: 144px;
}

.ppt-controls__spacer--mobile {
    width: 144px;
}
</style>
