import { useCoGuestState } from "tuikit-atomicx-vue3";

const { applyForSeat } = useCoGuestState();

// User clicks "Request to Join"
const handleRequestToConnect = async () => {
    try {
        await applyForSeat({ 
          seatIndex: -1, // -1 assigns a seat randomly
          timeout: 30,   // Timeout in seconds; if TS expects ms, use 30000
        });
        console.log('Request sent');
    } catch (error) {
        console.error('Request failed', error);
    }
}

import { onMounted, onUnmounted } from 'vue';
import { useCoGuestState, useDeviceState, CoGuestEvent } from "tuikit-atomicx-vue3";

const { subscribeEvent, unsubscribeEvent } = useCoGuestState();
const { openLocalMicrophone, openLocalCamera } = useDeviceState();

const handleGuestApplicationResponded = (eventInfo: any) => {
    if (eventInfo.isAccept) {
        console.log('Guest request accepted');
        // Enable microphone and camera
        openLocalMicrophone();
        openLocalCamera();
        // Update UI to indicate guest connection is active
    } else {
        console.log('Guest request rejected');
        // Notify user that the request was rejected
    }
};

onMounted(() => {
    subscribeEvent(CoGuestEvent.onGuestApplicationResponded, handleGuestApplicationResponded);
});

onUnmounted(() => {
    unsubscribeEvent(CoGuestEvent.onGuestApplicationResponded, handleGuestApplicationResponded);
});

import { useCoGuestState } from "tuikit-atomicx-vue3";

const { disConnect } = useCoGuestState();

// User clicks "Leave Seat"
const leaveSeat = async () => {
    try {
        await disConnect();
        console.log('Disconnected successfully');
    } catch (error) {
        console.log('Disconnect failed', error);
    }
}

import { useCoGuestState } from "tuikit-atomicx-vue3";

const { cancelApplication } = useCoGuestState();

// User clicks "Cancel Request" while waiting
const handleCancelRequest = async () => {
    await cancelApplication();
    console.log('Request cancelled successfully');
}

import { onMounted, onUnmounted } from 'vue';
import { useCoGuestState, CoHostEvent } from "tuikit-atomicx-vue3";

const { subscribeEvent, unsubscribeEvent } = useCoGuestState();

const handleGuestApplicationReceived = (eventInfo: any) => {
    console.log('Received guest request from audience:', eventInfo.guestUser);
    // Update UI, e.g., show a notification badge on the "Request List" button
};

onMounted(() => {
    subscribeEvent(CoHostEvent.onGuestApplicationReceived, handleGuestApplicationReceived);
});

onUnmounted(() => {
    unsubscribeEvent(CoHostEvent.onGuestApplicationReceived, handleGuestApplicationReceived);
});

<template>
    <div v-for="audience in applicants" :key="audience.userId" class="applicant-item">
      <span>{{ audience.userName }}</span>
      <button @click="handleAccept(audience.userId)">Accept</button>
      <button @click="handleReject(audience.userId)">Reject</button>
    </div>
</template>

<script setup lang="ts">
import { useCoGuestState } from "tuikit-atomicx-vue3";
const { applicants, acceptApplication, rejectApplication } = useCoGuestState();

const handleAccept = async (userId: string) => {
    await acceptApplication({ userId });
};

const handleReject = async (userId: string) => {
    await rejectApplication({ userId });
};
</script>

import { useCoGuestState } from "tuikit-atomicx-vue3";

const { inviteToSeat } = useCoGuestState();

// Host selects an audience member and sends an invitation
const handleInviteToSeat = async (userId: string) => {
    try {
        await inviteToSeat({
            userId,
            seatIndex: -1, // Assign seat randomly
            timeout: 30,
        });
        console.log(`Sent guest invitation to audience ${userId}`);
    } catch (error) {
        console.error('Invitation failed', error);
    }
}

import { onMounted } from 'vue';
import { useCoGuestState, CoHostEvent } from "tuikit-atomicx-vue3";

const { subscribeEvent } = useCoGuestState();

onMounted(() => {
    subscribeEvent(CoHostEvent.onHostInvitationResponded, (eventInfo) => {
        if(eventInfo.isAccept){
            console.log(`Audience ${eventInfo.guestUser.userName} accepted your invitation`);
        } else {
            console.log(`Audience ${eventInfo.guestUser.userName} rejected your invitation`);
        }
    });
});

import { onMounted } from 'vue';
import { useCoGuestState, CoGuestEvent } from "tuikit-atomicx-vue3";

const { subscribeEvent } = useCoGuestState();

onMounted(() => {
    subscribeEvent(CoGuestEvent.onHostInvitationReceived, (eventInfo) => {
        // Show a modal dialog for the user to accept or reject
        // Save eventInfo.hostUser.userId as inviterId
        showInviteDialog(eventInfo.hostUser.userId);
    });
});

import { useCoGuestState, useDeviceState } from "tuikit-atomicx-vue3";

const { acceptInvitation, rejectInvitation } = useCoGuestState();
const { openLocalMicrophone, openLocalCamera } = useDeviceState();

// User clicks "Accept"
const handleAccept = async (inviterId: string) => {
    try {
        await acceptInvitation({ inviterId });
        // Automatically enable microphone and camera after accepting
        openLocalMicrophone();
        openLocalCamera();
    } catch (error) {
        console.error('Failed to accept invitation', error);
    }
}

// User clicks "Reject"
const handleReject = async (inviterId: string) => {
    await rejectInvitation({ inviterId });
}