<template>
    <div>
        <h2>{{ $t('falukant.create.title') }}</h2>
        <form @submit.prevent="createFalukant">
            <label>{{ $t('falukant.create.gender') }}</label>
            <select v-model="falukant.gender" required @change="randomFirstName">
                <option value="male">{{ $t('falukant.create.male') }}</option>
                <option value="female">{{ $t('falukant.create.female') }}</option>
            </select>
            <div></div>
            <label>{{ $t('falukant.create.firstname') }}</label>
            <input type="text" v-model="falukant.firstname" required>
            <button @click="randomFirstName" type="button">{{ $t('falukant.create.random') }}</button>
            <label>{{ $t('falukant.create.lastname') }}</label>
            <input type="text" v-model="falukant.lastname" required>
            <button @click="randomLastName" type="button">{{ $t('falukant.create.random') }}</button>
            <button type="submit">{{ $t('falukant.create.submit') }}</button>
        </form>
        <img :src="falukant.gender == 'male' ? '/images/mascot/mascot_male.png' : '/images/mascot/mascot_female.png'"
            class="mascot-image" />
    </div>
</template>


<script>
import { mapActions } from 'vuex';
import apiClient from '@/utils/axios.js';

export default {
    name: 'FalukantCreateView',
    data() {
        return {
            falukant: {
                gender: 'male',
                firstname: '',
                lastname: '',
            },
        };
    },
    async mounted() {
        try {
            const falukantUser = await apiClient.get('/api/falukant/user');
            if (falukantUser.data) {
                this.$router.push({ name: 'FalukantOverview' });
                return;
            }
        } catch (error) {
        }
        await this.randomFirstName();
        await this.randomLastName();
    },
    methods: {
        ...mapActions(['createFalukant']),
        async createFalukant() {
            const newUser = await apiClient.post('/api/falukant/user', this.falukant);
            this.$router.push({ name: 'FalukantOverview' });
        },
        async randomFirstName() {
            const randomNameResult = await apiClient.get('/api/falukant/name/randomfirstname/' + this.falukant.gender);
            this.falukant.firstname = randomNameResult.data.name;
        },
        async randomLastName() {
            const randomNameResult = await apiClient.get('/api/falukant/name/randomlastname');
            this.falukant.lastname = randomNameResult.data.name;
        },
    },
};

</script>

<style scoped lang="scss">
form {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    row-gap: 15px;
    width: fit-content;
    margin: 0 auto;
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 4px;
}

label {
    text-align: right;
    font-weight: bold;
    margin-right: 10px;
}

select,
input {
    width: auto;
}

button {
    width: auto;
}

button[type="submit"] {
    grid-column: 1 / -1;
    justify-self: start;
    width: auto;
}

.mascot-image {
    display: block;
    margin: 0 auto;
    height: calc(100vh - 400px); 
    max-height: 100%;
    min-height: 150px;
    width: auto;
    object-fit: contain;
}
</style>
