<template>
    <div class="event-modal position-fixed bg-white shadow rounded" :style="modalStyle">
        <!-- 이벤트 선택 화면 -->
        <div v-if="!selectedEventType" class="d-flex flex-wrap gap-2 p-2">
            <div v-for="event in eventTypes" :key="event.code" class="event-icon-wrapper position-relative">
                <img
                    :src="`${baseUrl}img/main-category-img/main-${event.code}.png`"
                    class="event-icon-select"
                    style="width: 25px; height: 25px; cursor: pointer"
                    @click="handleEventClick(event)"
                />
                <!-- X 표시 수정 -->
                <span v-if="isEventExists(event.type)" class="cancel-mark"> × </span>
            </div>
        </div>

        <!-- 입력 폼 화면 -->
        <div v-else class="p-2" style="min-width: 200px">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <small>{{ getEventTitle(selectedEventType) }}</small>
                <button class="btn-close btn-close-sm" style="font-size: 8px" @click="resetForm"></button>
            </div>
            <div class="mb-2">
                <input
                    type="text"
                    class="form-control form-control-sm py-1"
                    style="height: 25px; font-size: 12px"
                    placeholder="장소"
                    v-model="eventPlace"
                    maxlength="20"
                    @input="handleChangeInput"
                />
                <span v-if="noInputAlert" class="invalid-feedback d-block" style="padding-left: 5px">{{ noInputAlert }}</span>
            </div>
            <div class="mb-2">
                <input
                    type="time"
                    class="form-control form-control-sm py-1"
                    style="height: 25px; font-size: 12px"
                    v-model="eventTime"
                    @input="handleChangeInput2"
                />
                <span v-if="noInputAlert2" class="invalid-feedback d-block" style="padding-left: 5px">{{ noInputAlert2 }}</span>
            </div>
            <div class="text-end">
                <button class="btn btn-primary btn-sm py-1" style="font-size: 12px; height: 25px; line-height: 1" @click="handleSubmit">
                    등록
                </button>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { ref, computed } from 'vue';

    const props = defineProps({
        position: {
            type: Object,
            required: true,
            default: () => ({ x: 0, y: 0 }),
        },
        selectedDate: {
            type: String,
            required: true,
        },
        baseUrl: {
            type: String,
            required: true,
        },
        dateEvents: {
            type: Array,
        },
    });

    const emit = defineEmits(['select', 'delete', 'insert']);

    // 폼 관련 상태
    const selectedEventType = ref(null);
    const eventPlace = ref('');
    const eventTime = ref('');
    const noInputAlert = ref(null);
    const noInputAlert2 = ref(null);

    const eventTypes = [
        { type: 'birthdayParty', code: '300203', title: '생일파티' },
        { type: 'dinner', code: '300204', title: '회식' },
        { type: 'teaTime', code: '300205', title: '티타임' },
        { type: 'workshop', code: '300206', title: '워크샵' },
    ];

    const getEventTitle = type => {
        return eventTypes.find(event => event.code === type)?.title || '';
    };

    const isEventExists = type => {
        return props.dateEvents?.some(event => event.type === type);
    };

    const handleEventClick = event => {
        if (isEventExists(event.type)) {
            if (confirm('이벤트를 취소하시겠습니까?')) {
                emit('delete', {
                    date: props.selectedDate,
                    code: event.code,
                    title: event.title,
                });
            }
        } else {
            selectedEventType.value = event.code;
            noInputAlert.value = '';
            noInputAlert2.value = '';
        }
    };

    const handleSubmit = () => {
        if (isValid()) {
            emit('insert', {
                date: props.selectedDate,
                code: selectedEventType.value,
                title: getEventTitle(selectedEventType.value),
                place: eventPlace.value.trim(),
                time: eventTime.value,
            });
        }
    };

    // 유효성 검사
    const isValid = () => {
        let isValid = true;

        if (!eventPlace.value.trim()) {
            noInputAlert.value = '장소를 입력해 주세요';
            isValid = false;
        } else {
            noInputAlert.value = '';
        }

        if (!eventTime.value) {
            noInputAlert2.value = '시간을 입력해 주세요';
            isValid = false;
        } else {
            noInputAlert2.value = '';
        }

        return isValid;
    };

    const handleChangeInput = () => {
        noInputAlert.value = null;
    };

    const handleChangeInput2 = () => {
        noInputAlert2.value = null;
    };

    const resetForm = () => {
        selectedEventType.value = null;
        eventPlace.value = '';
        eventTime.value = '';
    };

    // 모달 스타일 계산을 computed로 변경
    const modalStyle = computed(() => {
        const modalWidth = 200; // 모달의 예상 너비
        const modalHeight = 150; // 모달의 예상 높이
        const viewportWidth = window.innerWidth;
        const viewportHeight = window.innerHeight;

        let x = props.position?.x || 0;
        let y = props.position?.y || 0;

        // 모달이 뷰포트를 벗어나지 않도록 조정
        if (x + modalWidth > viewportWidth) {
            x = viewportWidth - modalWidth - 10;
        }
        if (x < 0) {
            x = 10;
        }
        if (y + modalHeight > viewportHeight) {
            y = viewportHeight - modalHeight - 10;
        }
        if (y < 0) {
            y = 10;
        }

        return {
            left: `${x}px`,
            top: `${y}px`,
            zIndex: 1050,
            maxWidth: '90vw', // 뷰포트 너비의 90%를 넘지 않도록
            maxHeight: '90vh', // 뷰포트 높이의 90%를 넘지 않도록
        };
    });
</script>

<style scoped>
    .event-icon-wrapper {
        position: relative;
        display: inline-block;
    }

    .event-icon-select {
        transition: transform 0.2s;
    }

    .event-icon-select:hover {
        transform: scale(1.1);
    }

    .cancel-mark {
        position: absolute;
        top: -8px;
        right: -8px;
        width: 16px;
        height: 16px;
        background-color: #dc3545;
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: bold;
        line-height: 1;
    }

    .event-modal {
        min-width: 120px;
        max-width: 300px;
        overflow: auto;
    }

    /* 작은 화면에서의 스타일 */
    @media (max-width: 576px) {
        .event-modal {
            min-width: 100px;
            font-size: 0.9em;
        }
    }
</style>
