@php

    use DefStudio\GameEngine\Http\Livewire\Tasks\Edit;
    use DefStudio\GameEngine\Actions\Awards\GetAwardsForScope;
    use DefStudio\GameEngine\Enums\MediaConversion;

    /** @var Edit $this */

    /** @var \DefStudio\GameEngine\Decorators\Tasks\DragAndDrop $task */
    $task = $this->task;

    $available_awards = GetAwardsForScope::run($task->model);



    $task->loadMissing('media.model');
@endphp
<div class="flex flex-col  gap-6">
    <div class="flex flex-col gap-6">
        <x-editor id="question_editor"
                  model="task.configuration.question"
                  :label="__('Question')"
        >{{$task->question()}}</x-editor>


        <div x-data="{
                dragging: {mouse_x: null, mouse_y: null},
                drag_start(index, e){
                    this.dragging.mouse_x = e.offsetX;
                    this.dragging.mouse_y = e.offsetY;
                    e.dataTransfer.effectAllowed = 'move';
                },
                drag_end(index, e){
                    const offset_x = e.offsetX - this.dragging.mouse_x;
                    const offset_y = e.offsetY - this.dragging.mouse_y;
                    this.$wire.call('move_tile_placeholder', index, offset_x, offset_y);
                }
            }"
             class="relative overflow-auto">
            <x-game-engine::livewire.image_field
                id="base_image"
                model="image_assets.base_image"
                :uploaded-url="$this->task->getFirstMediaUrl('base_image')"
                :helper="__('SVG, PNG or JPG')"
                remove-method="remove_base_image"
            />

            @foreach($task->tiles() as $tile_index => $tile_data)
                @php($uploading_image = $this->image_assets['tile_'.$tile_index] ?? null)

                @continue($task->media->find($tile_data['media_id']) === null && empty($uploading_image?->getMimeType()))

                <img src="{{$task->media->find($tile_data['media_id'])?->getUrl() ?? $uploading_image?->temporaryUrl()}}"
                     id="draggable_tile_{{$tile_index}}"
                     wire:key="draggable_tile_{{$tile_index}}"
                     class="cursor-pointer hover:opacity-90"
                     style="position: absolute; top: {{$tile_data['anchor']['y']}}px; left: {{$tile_data['anchor']['x']}}px;"
                     draggable=true
                     @dragstart="drag_start({{$tile_index}}, event)"
                     @dragend="drag_end({{$tile_index}}, event)"
                >
            @endforeach
        </div>

    </div>

    @if(count($task->tiles()))

        <x-game-engine::elements.labeled-box :label="__('Tiles')" class="space-y-4">
            @foreach($task->tiles() as $tile_index => $tile_data)
                <x-game-engine::elements.marked-box x-data="{show_awards: false}">
                    <div class="space-y-4 grow">
                        <div class="flex">
                            <x-game-engine::livewire.image_field
                                id="tile_placeholder_{{$tile_index}}"
                                model="image_assets.tile_{{$tile_index}}"
                                :label='$this->task->media->find($tile_data["media_id"]) || !empty($this->image_assets["tile_$tile_index"])? "" : __("Upload new tile image")'
                                :uploaded-url="$this->task->media->find($tile_data['media_id'])?->getUrl(MediaConversion::thumb->name)"
                                :helper="__('SVG, PNG or JPG')"
                                remove-method="remove_tile_placeholder({{$tile_index}})"
                                class="mr-2"
                            />

                            <div>
                                <x-number :label="__('Snap')" :w-full="false" size="sm" max="4" model="task.configuration.tiles.{{$tile_index}}.snap" base-class="w-16" defer>
                                    <x-slot name="postfix">{{__('px')}}</x-slot>
                                </x-number>
                            </div>

                            @if($available_awards->isNotEmpty())
                                <x-button icon="star"
                                          color="secondary"
                                          size="sm"
                                          wire:loading.disable
                                          title="{{__('Awards')}}"
                                          @click="show_awards = !show_awards"
                                          class="my-auto ml-4"
                                />
                            @endif
                            <x-button icon="trash"
                                      class="my-auto ml-auto"
                                      size="sm"
                                      color="secondary"
                                      wire:click="delete_tile({{$tile_index}})"
                                      wire:loading.disable
                            />
                        </div>


                        <x-game-engine::awards.assign x-show="show_awards" :awards="$available_awards" model="task.configuration.tiles.{{$tile_index}}.awards"/>

                    </div>

                </x-game-engine::elements.marked-box>
            @endforeach
        </x-game-engine::elements.labeled-box>
    @endif

    <div class="flex flex-col gap-6">
        <x-button color="secondary"
                  size="sm"
                  icon="plus"
                  class="mr-auto"
                  wire:click="add_tile"
                  wire:loading.disable
        >{{__('Add Tile')}}</x-button>

        <div class="flex flex-col">
            <x-checkbox model="task.configuration.randomize_tiles_order" :label="__('Randomize tiles order')"/>
            <x-checkbox model="task.configuration.repositioning_allowed" :label="__('Allow tiles repositioning')"/>
            <x-checkbox model="task.configuration.partial_submit_allowed" :label="__('Allow answer submit if not finished')"/>
            <x-checkbox model="task.configuration.loose_snaps" :label="__('Allow tiles release outside snaps')"/>
        </div>
    </div>


    @if($available_awards->isNotEmpty())
        <x-card :collapsed="true">
            <x-slot name="header" class="!bg-gray-200 font-bold uppercase">
                <x-icon name="star"/>&nbsp;{{__('100% Completion Awards')}}
            </x-slot>
            <x-game-engine::awards.assign :awards="$available_awards" model="task.configuration.completion_awards"/>
        </x-card>
    @endif
</div>
