<template>
    <div class="mb-4 row">
        <label :for="inputId" class="col-md-2 col-form-label">{{ title }}</label>
        <div class="col-md-10">
            <input
                class="form-control"
                type="file"
                :id="inputId"
                ref="fileInput"
                @change="changeHandler"
                multiple
            />
            <div v-if="showError" class="text-danger mt-1">
                {{ errorMessage }}
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref ,computed} from 'vue';
import { fileMsg } from '@/common/msgEnum';

// Props
const props = defineProps({
    title: {
        type: String,
        default: '라벨',
        required: true,
    },
    name: {
        type: String,
        default: 'fileInput',
        required: true,
    },
    isAlert: {
        type: Boolean,
        default: false,
        required: false,
    },
});
const inputId = computed(() => props.name || 'defaultFileInput');

const emits = defineEmits(['update:data', 'update:isValid']);

const MAX_TOTAL_SIZE = 5 * 1024 * 1024; // 5MB
const MAX_FILE_COUNT = 5; // 최대 파일 개수
const ALLOWED_FILE_TYPES = []; // 모든 파일을 허용

const showError = ref(false);
const fileMsgKey = ref(''); // 에러 메시지 키

const changeHandler = (event) => {
    const files = Array.from(event.target.files);
    const totalSize = files.reduce((sum, file) => sum + file.size, 0);

    // ALLOWED_FILE_TYPES가 비어있으면 모든 파일 허용
    const invalidFiles = ALLOWED_FILE_TYPES.length > 0
        ? files.filter(file => !ALLOWED_FILE_TYPES.includes(file.type))
        : [];

    if (totalSize > MAX_TOTAL_SIZE) {
        showError.value = true;
        fileMsgKey.value = 'FileMaxSizeMsg';
        emits('update:data', []);
        emits('update:isValid', false);
    } else if (files.length > MAX_FILE_COUNT) {
        showError.value = true;
        fileMsgKey.value = 'FileMaxLengthMsg';
        emits('update:data', []);
        emits('update:isValid', false);
    } else if (invalidFiles.length > 0) {
        showError.value = true;
        fileMsgKey.value = 'FileNotTypeMsg';
        emits('update:data', []);
        emits('update:isValid', false);
    } else {
        showError.value = false;
        fileMsgKey.value = '';
        emits('update:data', files);
        emits('update:isValid', true);
    }
};

const errorMessage = computed(() => (fileMsg[fileMsgKey.value] || ''));
</script>
