<script setup lang="ts">
import { getAuthClient } from '@/api/auth_client';
import type { Scenario } from '@/api/generated/crabs/evening_detective_server';
import HeaderMenu from '@/components/HeaderMenu.vue'
import { useMessage } from 'naive-ui';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { NCard, NModal, NButton, NInput } from 'naive-ui'


const client = getAuthClient();

const scenarios = ref<Scenario[]>([])

const router = useRouter()

const message = useMessage()

const showAddScenarioModal = ref(false)
const newScenarioName = ref('')

async function getScenarios() {
    scenarios.value = []
    const res = await client.GetMyScenarios({})
    scenarios.value = res.scenarios!
}

async function addScenario(name: string) {
    const res = await client.AddScenario({ name: name })
    if (res.error != '') {
        message.error(res.error!)
        return
    }
    await toScenarioEditor(res.id!)
}

async function toScenarioEditor(id: number) {
    router.push('/scenarios/' + id)
}

getScenarios()
</script>

<template>
    <HeaderMenu :add-logout="true" active="scenarios" />

    <div class="center-block-custom-big content-block">

        <div class="scenarios-container">

            <div class="scenario-block" @click="showAddScenarioModal = true">
                <div class="scenario-image-block scenario-image-plus">+</div>
                <p class="scenario-title">Создать новый сценарий</p>
            </div>

            <div class="scenario-block" v-for="scenario in scenarios" @click="toScenarioEditor(scenario.id!)">
                <div class="scenario-image-block scenario-image"
                    :style="{ backgroundImage: `url(${scenario.image})` }"></div>
                <p class="scenario-title">{{ scenario.name }}</p>
            </div>

        </div>

    </div>

    <!-- Окно создания сценария -->
    <n-modal v-model:show="showAddScenarioModal">
        <n-card style="width: 600px" title="Создание сценария" :bordered="false" size="huge" role="dialog"
            aria-modal="true">
            <template #header-extra>
                <n-button @click="showAddScenarioModal = false">
                    x
                </n-button>
            </template>
            <n-input v-model:value="newScenarioName" type="text" placeholder='Дело №0 "Следствие ведут овечки"' />
            <template #footer>
                <n-button @click="addScenario(newScenarioName)" :disabled="newScenarioName.length == 0">
                    Создать
                </n-button>
            </template>
        </n-card>
    </n-modal>

</template>

<style scoped>
.scenarios-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    overflow-y: auto;
    padding: 40px 0;
    height: calc(100vh - 150px);
    /* border: 1px solid red; */
}

.scenario-block {
    margin: 10px;
    width: 150px;
    cursor: pointer;
    /* background-color: #553333; */
}

.scenario-block:hover {
    color: #63e2b7;
}

.scenario-image-block {
    height: 150px;
    border-radius: 10px;
}

.scenario-image-block:hover {
    color: #63e2b7;
    border: 2px solid #63e2b7;
}

.scenario-image-plus {
    font-size: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #333333;
}

.scenario-image {
    background-size: cover;
    background-position: center;
}

.scenario-title {
    padding: 5px 0;
}

@media (min-width: 1024px) {
    .scenarios-container {
        height: calc(100vh - 70px);
    }

    .scenario-block {
        width: 250px;
    }

    .scenario-image-block {
        height: 250px;
        border-radius: 10px;
    }
}
</style>
