<template>
    <form @submit.prevent="doUpdate">
        <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>
        <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"
                        :disabled="targetStatus != 0"
                        type="text"
                        name="title"
                        class="block w-full border-0 pt-2.5 text-lg font-medium placeholder-gray-500 focus:ring-0"
                        placeholder="Title"
                    />
                    <label for="description" class="sr-only">Description</label>
                    <textarea
                        id="description"
                        v-model="targetContent"
                        rows="8"
                        :disabled="targetStatus != 0"
                        name="description"
                        class="block w-full border-0 py-0 resize-none placeholder-gray-500 focus:ring-0 sm:text-sm"
                        placeholder="Write a description..."
                    />

                    <!-- 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
                                    :disabled="targetStatus != 0"
                                    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="targetAttachmentFrom"
                        :read-only-flag="targetStatus != 0"
                        :update-attachments="updateAttachments"
                    />
                </div>
            </form>

            <div v-if="targetStatus == 2">
                <p class="mt-5 text-sm text-gray-700">답변</p>

                <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="answer" class="sr-only">answer</label>
                    <textarea
                        id="answer"
                        v-model="targetAnswer"
                        disabled
                        rows="8"
                        name="answer"
                        class="block w-full border-0 py-0 resize-none placeholder-gray-500 focus:ring-0 sm:text-sm"
                        placeholder=""
                    />
                </div>
                <base-attachment-ctl1
                    :attachments="targetAttachmentTo"
                    :read-only-flag="true"
                />
            </div>
        </div>

        <div class="mt-2 flex justify-between">
            <div>
                <button
                    v-if="currentTarget != 'inquiry'"
                    type="button"
                    :class="
                        targetStatus == 0
                            ? 'inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500'
                            : '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'
                    "
                    @click="doToggle"
                >
                    {{ targetStatus == 0 ? '삭제' : '복구' }}
                </button>
            </div>
            <div>
                <button
                    v-if="targetStatus == 0"
                    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"
                >
                    {{ targetStatus == 0 ? '수정' : '확인' }}
                </button>
            </div>
        </div>
    </form>
</template>

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

const route = useRoute();

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

let labels = [
    { name: '라벨 없음', value: null },
    { name: '공지', value: 'notice' },
    { name: '이벤트', value: 'event' },
    // More items...
];
const labelled = ref(labels[0]);

const newTitle = ref('');
const newDescription = ref('');

const contentTitle = ref('');
const contentMessageGuide = ref('');

const currentTarget = ref('inquiry');

const actionTarget = 'inquiry';

const inPregressFlag = ref(false);

const targetTitle = ref('');
const targetContent = ref('');
const targetAttachmentFrom = ref([]);
const targetAnswer = ref('');
const targetAttachmentTo = ref([]);
const targetStatus = ref(0);

const inquiryListOptionTags = ['대기중', '검토중', '답변완료', '삭제'];

let targetCreated = '';

async function doToggle() {
    if (targetStatus.value == 0) {
        const responseJson = await _crossCtl.doComm('delete', actionTarget, {
            hero: route.params.hero,
        });
        console.log('responseJson=', responseJson);
        if (responseJson['responseMessage'] == 'ok') {
            targetStatus.value = 4;
            alert('ok');
            router.back();
        } else {
            alert(responseJson['responseMessage']);
        }
    } else {
        router.back();
    }
}

newTitle.value = '1:1 문의 처리';
newDescription.value =
    '1:1 문의에 답을 입력하면 상태가 즉시 답변 완료로 변하지만, 내용은 추가 수정할 수 있습니다.';

contentTitle.value = '질문';
contentMessageGuide.value = '답변';

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

console.log('route.params.hero=', route.params.hero);

const responseJson = await _crossCtl.doComm('select', currentTarget.value, {
    hero: route.params.hero,
});

if (responseJson['responseCode'] == 200) {
    console.log(responseJson['data']);

    targetTitle.value = responseJson['data'][0]['title'];
    targetContent.value = responseJson['data'][0]['question'];
    targetAttachmentFrom.value = JSON.parse(
        responseJson['data'][0]['attachment_from']
    );

    console.log('huk targetAttachmentFrom.value = ', targetAttachmentFrom);
    targetAnswer.value = responseJson['data'][0]['answer'];
    targetAttachmentTo.value = JSON.parse(
        responseJson['data'][0]['attachment_to']
    );

    const tmpFlags =
        responseJson['data'][0]['flags'] != null
            ? responseJson['data'][0]['flags']
            : '[]';

    const flags = JSON.parse(tmpFlags);
    for (let i = 0; i < flags.length; i++) {
        const flag = flags[i];
        for (let j = 0; j < labels.length; j++) {
            if (flag == labels[j]['value']) {
                labelled.value = labels[j];
            }
        }
    }

    targetCreated = responseJson['data'][0]['created'];

    targetStatus.value = responseJson['data'][0]['status'];
} else {
    alert(responseJson['responseMessage']);
}

// console.log('huk route.params.target=', route.params.target);

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

    router.back();
}

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

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

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

    if (targetStatus.value != 0) {
        router.back();
        return;
    }

    inPregressFlag.value = true;

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