<template>
    <v-container>
        <v-row :class="closeClass">
            <v-sheet v-if="props.dealer && stats.cuffs" class="mr-4 text-button" :elevation="2">CUFFED</v-sheet>
            <PlayerHP :hp="props.stats.hp" />
            <v-sheet v-if="!props.dealer && stats.cuffs" class="ml-4 text-button" :elevation="2">CUFFED</v-sheet>
        </v-row>
        <v-row class="d-flex flex-fill">
            <v-col v-if="!props.dealer" cols="4"></v-col>
            <v-col cols="8">
                <PlayerItems :items="props.stats.items" :disabled="props.disabled" @item="(evt: number) => emit('item', evt)" />
            </v-col>
        </v-row>
    </v-container>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { Player } from '@/lib/game';

export interface Props {
    /**
     * The status of the player to show.
     */
    stats: Player;
    /**
     * Whether this is the dealer's side, for alignment.
     */
    dealer: boolean;
    /**
     * Whether the controls are disabled.
     */
    disabled: boolean;
}

export interface Emits {
    (e: 'item', k: number): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const closeClass = computed(() => ({ 'd-flex': true, 'justify-end': props.dealer, 'justify-start': !props.dealer }));
const farClass = computed(() => ({ 'd-flex': true, 'justify-end': !props.dealer, 'justify-start': props.dealer }));
</script>
