<!--
SPDX-FileCopyrightText: syuilo and other misskey contributors
SPDX-License-Identifier: AGPL-3.0-only
-->

<template>
<MkStickyContainer>
	<MkSpacer :contentMax="600">
		<div class="_gaps">
			<div class="_panel">
				<MkAvatar v-if="room.user1" :user="room.user1" :class="$style.userAvatar"/>
				<div v-else-if="room.user1Ai">AI</div>
				<div v-if="room.user1Ready">OK</div>
			</div>
			<div class="_panel">
				<MkAvatar v-if="room.user2" :user="room.user2" :class="$style.userAvatar"/>
				<div v-else-if="room.user2Ai">AI</div>
				<div v-if="room.user2Ready">OK</div>
			</div>
			<div class="_panel">
				<MkAvatar v-if="room.user3" :user="room.user3" :class="$style.userAvatar"/>
				<div v-else-if="room.user3Ai">AI</div>
				<div v-if="room.user3Ready">OK</div>
			</div>
			<div class="_panel">
				<MkAvatar v-if="room.user4" :user="room.user4" :class="$style.userAvatar"/>
				<div v-else-if="room.user4Ai">AI</div>
				<div v-if="room.user4Ready">OK</div>
			</div>
		</div>
	</MkSpacer>
	<template #footer>
		<div :class="$style.footer">
			<MkSpacer :contentMax="700" :marginMin="16" :marginMax="16">
				<div style="text-align: center;" class="_gaps_s">
					<div class="_buttonsCenter">
						<MkButton rounded danger @click="leave">{{ i18n.ts._mahjong.leave }}</MkButton>
						<MkButton v-if="!isReady" rounded primary @click="ready">{{ i18n.ts._mahjong.ready }}</MkButton>
						<MkButton v-if="isReady" rounded @click="unready">{{ i18n.ts._mahjong.cancelReady }}</MkButton>
					</div>
				</div>
			</MkSpacer>
		</div>
	</template>
</MkStickyContainer>
</template>

<script lang="ts" setup>
import { computed, watch, ref, onMounted, shallowRef, onUnmounted } from 'vue';
import * as Misskey from 'misskey-js';
import * as Mahjong from 'misskey-mahjong';
import { i18n } from '@/i18n.js';
import { signinRequired } from '@/account.js';
import { deepClone } from '@/scripts/clone.js';
import MkButton from '@/components/MkButton.vue';
import MkRadios from '@/components/MkRadios.vue';
import MkSwitch from '@/components/MkSwitch.vue';
import MkFolder from '@/components/MkFolder.vue';
import * as os from '@/os.js';
import { MenuItem } from '@/types/menu.js';
import { useRouter } from '@/global/router/supplier.js';

const $i = signinRequired();

const router = useRouter();

const props = defineProps<{
	room: Misskey.entities.MahjongRoomDetailed;
	connection: Misskey.ChannelConnection;
}>();

const room = ref<Misskey.entities.MahjongRoomDetailed>(deepClone(props.room));

const isReady = computed(() => {
	if (room.value.user1Id === $i.id && room.value.user1Ready) return true;
	if (room.value.user2Id === $i.id && room.value.user2Ready) return true;
	if (room.value.user3Id === $i.id && room.value.user3Ready) return true;
	if (room.value.user4Id === $i.id && room.value.user4Ready) return true;
	return false;
});

async function leave() {
	const { canceled } = await os.confirm({
		type: 'warning',
		text: i18n.ts.areYouSure,
	});
	if (canceled) return;

	props.connection.send('leave', {});

	router.push('/mahjong');
}

function ready() {
	props.connection.send('ready', true);
}

function unready() {
	props.connection.send('ready', false);
}

function onChangeReadyStates(states) {
	room.value.user1Ready = states.user1;
	room.value.user2Ready = states.user2;
	room.value.user3Ready = states.user3;
	room.value.user4Ready = states.user4;
}

props.connection.on('changeReadyStates', onChangeReadyStates);

onUnmounted(() => {
	props.connection.off('changeReadyStates', onChangeReadyStates);
});
</script>

<style lang="scss" module>
.userAvatar {
	width: 48px;
	height: 48px;
}

.footer {
	-webkit-backdrop-filter: var(--blur, blur(15px));
	backdrop-filter: var(--blur, blur(15px));
	background: var(--acrylicBg);
	border-top: solid 0.5px var(--divider);
}
</style>
