<template>
    <form @submit.prevent="doCreate">
        <div class="sm:flex sm:items-center">
            <div class="sm:flex-auto">
                <h1 class="text-xl font-semibold text-gray-900">
                    {{ newTitle }}
                </h1>
                <p class="mt-2 text-sm text-gray-700">
                    {{ newDescription }}
                </p>
            </div>
            <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
                <img
                    v-if="inPregressFlag"
                    width="32"
                    src="/loading-load-2.gif"
                />
            </div>
        </div>

        <div class="mt-2"></div>

        <form action="#" class="relative">
            <div
                class="border border-gray-300 rounded-lg shadow-sm overflow-hidden focus-within:border-indigo-500 focus-within:ring-1 focus-within:ring-indigo-500"
            >
                <label for="title" class="sr-only">Title</label>
                <input
                    id="title"
                    v-model="targetTitle"
                    type="text"
                    name="title"
                    class="block w-full border-0 pt-2.5 text-lg font-medium placeholder-gray-500 focus:ring-0"
                    placeholder="제목"
                />
                <label for="description" class="sr-only">Description</label>
                <textarea
                    id="description"
                    v-model="targetContent"
                    rows="12"
                    name="description"
                    class="block w-full border-0 py-0 resize-none placeholder-gray-500 focus:ring-0 sm:text-sm"
                    placeholder="내용..."
                />

                <!-- Spacer element to match the height of the toolbar -->
                <div aria-hidden="true">
                    <div class="py-2">
                        <div class="h-9" />
                    </div>
                    <div class="h-px" />
                    <div class="py-2">
                        <div class="py-px">
                            <div class="h-9" />
                        </div>
                    </div>
                </div>
            </div>

            <div class="absolute bottom-0 inset-x-px">
                <!-- Actions: These are just examples to demonstrate the concept, replace/wire these up however makes sense for your project. -->
                <div
                    class="flex flex-nowrap justify-end py-2 px-2 space-x-2 sm:px-3"
                >
                    <Listbox v-model="labelled" as="div" class="flex-shrink-0">
                        <ListboxLabel class="sr-only">
                            Add a label
                        </ListboxLabel>
                        <div class="relative">
                            <ListboxButton
                                class="relative inline-flex items-center rounded-full py-2 px-2 bg-gray-50 text-sm font-medium text-gray-500 whitespace-nowrap hover:bg-gray-100 sm:px-3"
                            >
                                <TagIcon
                                    :class="[
                                        labelled.value === null
                                            ? 'text-gray-300'
                                            : 'text-gray-500',
                                        'flex-shrink-0 h-5 w-5 sm:-ml-1',
                                    ]"
                                    aria-hidden="true"
                                />
                                <span
                                    :class="[
                                        labelled.value === null
                                            ? ''
                                            : 'text-gray-900',
                                        'hidden truncate sm:ml-2 sm:block',
                                    ]"
                                    >{{
                                        labelled.value === null
                                            ? 'Label'
                                            : labelled.name
                                    }}</span
                                >
                            </ListboxButton>

                            <transition
                                leave-active-class="transition ease-in duration-100"
                                leave-from-class="opacity-100"
                                leave-to-class="opacity-0"
                            >
                                <ListboxOptions
                                    class="absolute right-0 z-10 mt-1 w-52 bg-white shadow max-h-56 rounded-lg py-3 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
                                >
                                    <ListboxOption
                                        v-for="label in labels"
                                        :key="label.value"
                                        v-slot="{ active }"
                                        as="template"
                                        :value="label"
                                    >
                                        <li
                                            :class="[
                                                active
                                                    ? 'bg-gray-100'
                                                    : 'bg-white',
                                                'cursor-default select-none relative py-2 px-3',
                                            ]"
                                        >
                                            <div class="flex items-center">
                                                <span
                                                    class="block font-medium truncate"
                                                >
                                                    {{ label.name }}
                                                </span>
                                            </div>
                                        </li>
                                    </ListboxOption>
                                </ListboxOptions>
                            </transition>
                        </div>
                    </Listbox>
                </div>
                <base-attachment-ctl1
                    :attachments="attachments"
                    :read-only-flag="false"
                    :update-attachments="updateAttachments"
                    :secure-enabled="true"
                />
            </div>
        </form>

        <div class="mt-2 flex justify-end">
            <button
                type="button"
                class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                @click="doCancel"
            >
                취소
            </button>
            <button
                type="submit"
                class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
            >
                저장
            </button>
        </div>
    </form>
</template>

<script setup>
import {
    Listbox,
    ListboxButton,
    ListboxLabel,
    ListboxOption,
    ListboxOptions,
} from '@headlessui/vue';

import { PaperClipIcon, TagIcon } from '@heroicons/vue/24/solid';
const route = useRoute();

definePageMeta({
    middleware: 'check-auth-user',
});

const labels = [
    { name: '라벨 없음', value: null },
    { name: '사이트 이용', value: 'site' },
    { name: 'API 문의', value: 'api' },
    { name: '기타', value: 'etc' },
    // More items...
];
const labelled = ref(labels[0]);

const newTitle = '1:1 문의 작성';
const newDescription =
    '문의 사항을 적어 주시고 필요한 경우 파일도 첨부하실 수 있습니다.';

const inPregressFlag = ref(false);

const targetTitle = ref('');
const targetContent = ref('');
const attachments = ref([]);
const targetStatus = ref(0);

const actionTarget = 'inquiry';

const router = useRouter();

function updateAttachments(newAttachments) {
    console.log('newAttachments=', newAttachments);
    attachments.value = newAttachments;
}

async function doCancel() {
    if (inPregressFlag.value == true) {
        alert('이전 동작이 아직 진행중입니다.');
        return;
    }

    router.back();
}

async function doCreate() {
    if (inPregressFlag.value == true) {
        alert('이전 동작이 아직 진행중입니다.');
        return;
    }

    if (targetTitle.value == '' || targetContent.value == '') {
        alert('내용을 입력하셔야 합니다. ');
        return;
    }

    inPregressFlag.value = true;

    const responseJson = await _crossCtl.doComm('insert', actionTarget, {
        title: targetTitle.value,
        question: targetContent.value,
        attachmentFrom: attachments.value,
        flags: labelled.value['value']
            ? JSON.stringify([labelled.value['value']])
            : JSON.stringify([]),
    });
    inPregressFlag.value = false;
    if (responseJson['responseMessage'] == 'ok') {
        alert('ok');
        router.back();
    } else {
        alert('오류 : ' + responseJson['responseMessage']);
    }
}
</script>
