<script setup>
import { onMounted, ref } from 'vue';
import { SetupHandle, SetSize, ResetPosition, Top, ClearWindow } from '@/services/Windows';

import WindowHandle from './partials/WindowHandle.vue';
import ColorPicker from '../layouts/ColorPicker.vue';
import Server from '~/services/Server';
import { DisplayToast } from '~/services/Toaster';

const handle = ref(null);
const wrapper = ref(null);

const props = defineProps(['data']);
const data = props.data;

let id = data.id;

onMounted(() => {
    Top(wrapper);
    SetupHandle(id, handle);
    SetSize(id, {width: 500, height: 400});
    ResetPosition(id, "center");
});

const campaignName = ref("");
const campaignDescription = ref("");
const colorPicker = ref(null);

function NewCampaign(){
    const color = colorPicker.value.GetColor();
    console.log(color);
    Server().post('/campaign/create', {
        name: campaignName.value,
        description: campaignDescription.value,
        color: colorPicker.value.GetColor(),
    }).then((response) => {
        console.log(response.data);
        DisplayToast('green', $t('campaigns.create.success'), 3000);
        ClearWindow({id});
    });
}
</script>


<template>
    <div class="window-wrapper" :id="'window-wrapper-' + id" ref="wrapper">
        <WindowHandle :window="id" ref="handle"></WindowHandle>

        <div class="body">
            <!-- Body -->
            <form v-on:submit.prevent="NewCampaign">
                <div class="form-field">
                    <label>{{ $t('campaigns.create.name') }}</label>
                    <input type="text" :placeholder="$t('campaigns.create.enter')" name="campaignName" v-model="campaignName" autocomplete="off" >
                </div>
                <div class="form-field">
                    <label>{{ $t('campaigns.create.description') }}</label>
                    <textarea type="text" :placeholder="$t('campaigns.create.description-placeholder')" name="campaignDescription" v-model="campaignDescription" autocomplete="off" ></textarea>
                </div>
                <div class="form-field">
                    <label>{{ $t('campaigns.create.color') }}</label>
                    <ColorPicker ref="colorPicker"></ColorPicker>
                </div>
                <div class="form-actions">
                    <button class="btn-primary sound-click">
                        {{ $t("general.create") }}
                    </button>
                </div>
            </form>
        </div>

    </div>
</template>


<style scoped>
.window-wrapper {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.body {
    width: 100%;
}

.window-second-header {
    width: 100%;
    h2 {
        font-family: MrEavesRemake;
    }
}

form {
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
}

.form-field {
    padding: 2px;
    display: flex;
    align-items: left;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;

    > * {
        flex-grow: 1;
    }
}

label {
    text-align: left;
}

textarea {
    resize: none;
    height: 200px;
    font-size: 14px;
}

.form-actions {
    display: flex;
    justify-content: center; /* centers horizontally */
    margin-top: 10px;
}

.form-actions button {
    width: 100%;        /* makes it expand */
    max-width: 300px;   /* optional: prevents it from being too wide */
}

</style>


