@props([
    'disabled' => false,
    'error' => null,
    'viewable' => false,
    'label',
    'fileName' => '',
    'viewonly' => false,
    'placeholder' => 'Belum memilih file',
    'maxFileSize' => 5, // Dalam MB
])

@php
    $fileInputRef = App\Helpers\Reference::generate('FileInputRef');

    $isError = $error && strlen($error) > 1;

    $defaultClass =
        'File relative h-full flex items-center ps-3 pe-8 bg-gray-200 flex-1 rounded-l-none rounded-r-lg border select-none overflow-hidden
focus:outline-none focus:ring-[1.5px] focus:ring-inset focus:border-transparent focus:bg-white focus:text-black text-gray-200 border-gray-300 focus:ring-primary-100' .
        ($isError ? 'border-red-400 text-red-400 focus:ring-red-400 ' : ' ') .
        $fileInputRef;
@endphp

<x-stack
    class="w-full mb-2"
    x-data="{
        focus: false,
        disabled: false,
        files: null,
        showing: false,
        viewable: {{ $viewable ? 'true' : 'false' }},
        default: 'max-w-[80%] max-h-[80%] object-contain'
    }"
>
    @isset($label)
        <label
            class="font-semibold"
            x-bind:class="focus ? 'text-primary-100' : 'text-black/70'"
            for="{{ $attributes->get('id') }}"
        >
            {{ $label }}
            @if ($attributes->get('required'))
                <span class="text-red-300">*</span>
            @endif

        </label>
    @endisset

    @isset($description)
        <span class="text-xs text-black/50">{{ $description }}</span>
    @endisset

    <x-group class="w-full NPE-Input-File h-11 overflow-hidden">

        <input
            {{ $attributes->twMerge('hidden') }}
            x-ref="fileInputRef"
            x-on:change="() => {
                if ($event.target.files.length !== 0) {
                    if ($event.target.files[0].size > {{ $maxFileSize }} * 1024 * 1024) {
                        $refs.fileInputRef.value = ''
                        files = null
                        return $wire.notify('error', 'Ukuran file tidak boleh melebihi {{ $maxFileSize }}MB')
                    }

                    files = Object.values($event.target.files)
                }
            }"
            tabindex="-1"
            type="file"
            @if ($fileName)
        x-init="() => {
            const path = '{{ $fileName }}'
            const filePath = 'storage' + path.split('storage').pop()
            fetch(path)
                .then(response => response.blob())
                .then(blob => {
                    const file = new File([blob], path.split('/').pop(), { type: blob.type })
                    files = [file]
                })
        }"
        @endif
        />

        @if (!$disabled)
            <x-button
                class="gap-2 px-4 rounded-l-lg rounded-r-none"
                x-on:focus="focus = true"
                x-on:blur="focus = false"
                x-on:click="() => {
                if (!files || !viewable) {
                    $refs.fileInputRef.click()
                    return
                }

                if (viewable && files) {
                    if (files[0].type.split('/')[0] !== 'image') {
                        const url = URL.createObjectURL(files[0])
                        const a = document.createElement('a')
                        a.href = url
                        a.download = files[0].name
                        a.click()
                        URL.revokeObjectURL(url)
                        return
                    }
                    showing = true
                }
            }"
            >
                <i
                    class="ph {{ $viewable ? '' : 'ph-upload-simple' }}"
                    @if ($viewable) x-bind:class="files ? 'ph-eye' : 'ph-upload-simple'" @endif
                    @if ($slot->isNotEmpty()) x-init="files = 'NPE_GAMBAR'" @endif
                >
                </i>
                <span
                    @if ($viewable) x-text="files ? 'Lihat File' : 'Pilih File'"
                @else
                    x-text="'Pilih File'" @endif
                ></span>
            </x-button>
        @else
            <x-button
                class="gap-2 px-4 rounded-l-lg rounded-r-none"
                disabled
            >
                <i class="ph ph-upload-simple"></i>
                <span>Pilih File</span>
            </x-button>
        @endif

        <x-box class="{{ $defaultClass }}">
            @if ($slot->isNotEmpty())
                <span class="line-clamp-1">
                    {{ array_slice(explode('/', $fileName), -1)[0] }}
                </span>
            @else
                <x-text
                    class="line-clamp-1"
                    x-text="files ? files.map(file => file.name).join(',') : '{{ $placeholder }}'"
                />
            @endif

            @if (!$viewonly)
                <span
                    class="absolute right-0 h-full"
                    x-show="files"
                >
                    <button
                        class="flex items-center h-full px-2 text-danger hover:text-black"
                        type="button"
                        x-on:click="files = null"
                    >
                        <i class="ph-bold ph-x"></i>
                    </button>
                </span>
            @endif
        </x-box>

    </x-group>

    @if ($isError)
        <span class="my-3 text-xs text-red-300/80">{{ $error }}</span>
    @endif

    @if ($viewable)
        <template x-if="files && showing">
            <x-box
                x-show="showing"
                class="fixed inset-0 bg-black/60 overflow-auto p-12 z-[99999]"
            >
                <button
                    class="absolute flex items-center p-2 rounded-full top-10 left-10 text-white bg-gray-300/80 hover:bg-red-400"
                    type="button"
                    x-on:click="showing = false"
                >
                    <i class="text-2xl ph-bold ph-x"></i>
                </button>
                <div
                    onclick="event.cancelBubble = true"
                    class="flex justify-center min-h-full"
                >
                    <x-image
                        class="max-w-[80%] max-h-[80%] object-contain"
                        x-bind:src="URL.createObjectURL(files[0])"
                    />
                </div>
            </x-box>
        </template>
    @endif
</x-stack>