<!-- This example requires Tailwind CSS v2.0+ -->
<template>
    <div class="divide-y divide-gray-200">
        <form class="lg:col-span-9" @submit.prevent="doInsert">
            <!-- Profile section -->
            <div class="py-6 px-4 sm:p-6 lg:pb-8">
                <div class="sm:flex sm:items-center">
                    <div class="sm:flex-auto">
                        <h2 class="text-lg leading-6 font-medium text-gray-900">
                            가입 허가 항목 생성
                        </h2>
                        <p class="mt-1 text-sm text-gray-500">
                            이미 가입된 사용자에게는 적용되지 않으며, 이 항목이
                            저장된 상태 이후 가입시에만 적용됩니다.
                        </p>
                    </div>
                    <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none"></div>
                </div>

                <div class="mt-6 grid grid-cols-12 gap-6">
                    <div class="col-span-12 sm:col-span-6">
                        <label
                            for="uid"
                            class="block text-sm font-medium text-gray-700"
                            >이메일</label
                        >
                        <input
                            id="uid"
                            v-model="uid"
                            type="text"
                            name="uid"
                            autocomplete="uid"
                            class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm"
                        />
                    </div>
                </div>

                <div class="mt-6 flex flex-col lg:flex-row">
                    <div class="flex-grow space-y-6">
                        <div>
                            <label
                                for="memo"
                                class="block text-sm font-medium text-gray-700"
                            >
                                운영자 메모
                            </label>
                            <div class="mt-1">
                                <textarea
                                    id="memo"
                                    v-model="memo"
                                    name="memo"
                                    rows="3"
                                    class="shadow-sm focus:ring-sky-500 focus:border-sky-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md"
                                />
                            </div>
                            <p class="mt-2 text-sm text-gray-500">
                                관리자에게만 보여지는 메모 항목 입니다. 관리
                                편의를 위한 내용을 기입해 주세요.
                            </p>
                        </div>
                    </div>
                </div>

                <div class="mt-6 flex flex-col lg:flex-row">
                    <div class="flex-grow space-y-6">
                        <div>
                            <label
                                for="level"
                                class="block text-sm font-medium text-gray-700"
                            >
                                자격 설정
                            </label>
                            <div class="mt-1">
                                <RadioGroup v-model="selectedUserLevelInfo">
                                    <div
                                        class="mt-4 grid grid-cols-1 gap-y-6 sm:grid-cols-4 sm:gap-x-4"
                                    >
                                        <RadioGroupOption
                                            v-for="userLevel in userLevels"
                                            :key="userLevel.level"
                                            v-slot="{ checked, active }"
                                            as="template"
                                            :value="userLevel"
                                        >
                                            <div
                                                :class="[
                                                    checked
                                                        ? 'border-transparent'
                                                        : 'border-gray-300',
                                                    active
                                                        ? 'border-indigo-500 ring-2 ring-indigo-500'
                                                        : '',
                                                    'relative bg-white border rounded-lg shadow-sm p-4 flex cursor-pointer focus:outline-none',
                                                ]"
                                            >
                                                <span class="flex-1 flex">
                                                    <span class="flex flex-col">
                                                        <RadioGroupLabel
                                                            as="span"
                                                            class="block text-sm font-medium text-gray-900"
                                                        >
                                                            {{
                                                                userLevel.title
                                                            }}
                                                        </RadioGroupLabel>
                                                        <RadioGroupDescription
                                                            as="span"
                                                            class="mt-1 flex items-center text-sm text-gray-500"
                                                        >
                                                            {{
                                                                userLevel.description
                                                            }}
                                                        </RadioGroupDescription>
                                                        <RadioGroupDescription
                                                            as="span"
                                                            class="mt-6 text-sm font-medium text-gray-900"
                                                        >
                                                            {{
                                                                userLevel.users
                                                            }}
                                                        </RadioGroupDescription>
                                                    </span>
                                                </span>
                                                <CheckCircleIcon
                                                    :class="[
                                                        !checked
                                                            ? 'invisible'
                                                            : '',
                                                        'h-5 w-5 text-indigo-600',
                                                    ]"
                                                    aria-hidden="true"
                                                />
                                                <span
                                                    :class="[
                                                        active
                                                            ? 'border'
                                                            : 'border-2',
                                                        checked
                                                            ? 'border-indigo-500'
                                                            : 'border-transparent',
                                                        'absolute -inset-px rounded-lg pointer-events-none',
                                                    ]"
                                                    aria-hidden="true"
                                                />
                                            </div>
                                        </RadioGroupOption>
                                    </div>
                                </RadioGroup>
                            </div>
                            <p class="mt-2 text-sm text-gray-500">
                                해당 계정이 가입하면 자동으로 보여될 사용자
                                자격을 설정합니다.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

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

<script setup lang="ts">
import {
    RadioGroup,
    RadioGroupDescription,
    RadioGroupLabel,
    RadioGroupOption,
} from '@headlessui/vue';
import { CheckCircleIcon } from '@heroicons/vue/24/solid/index.js';

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

const userLevels = _crossCtl.siteConfig.userLevels;

const selectedUserLevelInfo = ref(_crossCtl.siteConfig.userLevels[0]);
const router = useRouter();

const uid = ref('');
const level = ref(3);
const memo = ref('');

// email: '1@1', displayName: '1@1', phone: '', memo: ''

for (let i = 0; i < _crossCtl.siteConfig.userLevels.length; i++) {
    const tmpLevelInfo = _crossCtl.siteConfig.userLevels[i];
    if (tmpLevelInfo.level == level.value) {
        selectedUserLevelInfo.value = tmpLevelInfo;
        break;
    }
}

async function doInsert() {
    const tmpUID = uid.value;

    console.log('tmpUID = ', tmpUID);

    if (tmpUID.trim() == '') {
        alert('이메일 주소를 아이디로 입력해 주세요.');
        return;
    }

    const responseJson = await _crossCtl.doComm('insert', 'admin:white', {
        uid: uid.value,
        level: selectedUserLevelInfo.value['level'],
        memo: memo.value,
    });
    console.log('responseJson=', responseJson);
    if (responseJson['responseMessage'] == 'ok') {
        alert('ok');
        router.back();
    } else {
        if (responseJson['responseMessage'].startsWith('ER_DUP_ENTRY:')) {
            alert('이미 동일 아이디가 설정되어 있습니다.');
        } else {
            alert(responseJson['responseMessage']);
        }
    }
}

async function doCancel() {
    router.back();
}
</script>
