@props([
    // Entries, built with App\Support\CrmCalendar::event().
    'events' => [],
    // month | week | day | agenda. A phone always opens on the agenda.
    'view' => 'month',
    // May entries be dragged and resized? Each entry can still refuse (editable: false).
    'editable' => false,
    // May empty days be clicked or dragged across to start a new entry?
    'selectable' => false,
    // The date to open on (Y-m-d). Today when omitted.
    'date' => null,
    // A fixed pixel height, or null to grow with the content.
    'height' => null,
    // Names this calendar, so 'crm-calendar-events' can address one of several.
    'name' => 'main',
    // Which entry types the key lists (keys of CrmCalendar::types()). All when omitted.
    'legend' => null,
    // Livewire methods to call, each given the event detail as its one argument.
    'onClick' => null,
    'onDrop' => null,
    'onSelect' => null,
    'onRange' => null,
])

{{--
    The CRM calendar. The one wrapper around FullCalendar (conflict register
    C6): events in through `events`, clicks and drops out through the `on*`
    props and as crm-calendar-* browser events. The contract is written out in
    resources/js/crm-calendar.js.

    Example, on a Livewire page:
        <x-crm.calendar :events="$events" editable on-click="openEntry" on-drop="moveEntry" />

    wire:ignore keeps Livewire from morphing the calendar away on re-render;
    send new entries with $this->dispatch('crm-calendar-events', events: [...]).
--}}
@php
    $types = \App\Support\CrmCalendar::types();

    $config = [
        'name' => $name,
        'events' => array_values($events),
        'view' => $view,
        'editable' => (bool) $editable,
        'selectable' => (bool) $selectable,
        'date' => $date,
        'height' => $height,
        'types' => $types,
        'handlers' => array_filter([
            'click' => $onClick,
            'drop' => $onDrop,
            'select' => $onSelect,
            'range' => $onRange,
        ]),
    ];
@endphp

<div
    {{ $attributes->merge(['class' => 'crm-calendar rounded-2xl bg-white p-3 shadow-sm ring-1 ring-slate-200/70 sm:p-4']) }}
    wire:ignore
    x-data="crmCalendar(@js($config))"
    x-on:crm-calendar-events.window="replace($event.detail)"
>
    <div x-show="loading" class="flex items-center justify-center gap-2 py-16 text-sm text-slate-500">
        <x-icon name="spinner" class="h-4 w-4 animate-spin" />
        {{ __('Loading the calendar…') }}
    </div>

    <div x-show="failed" x-cloak class="py-16 text-center text-sm text-rose-600">
        {{ __('The calendar could not be loaded. Refresh the page to try again.') }}
    </div>

    <div x-ref="calendar" x-show="! loading && ! failed" x-cloak></div>

    {{-- The key: what each colour means, in words and with an icon. --}}
    <ul class="mt-3 flex flex-wrap gap-x-4 gap-y-1.5 border-t border-slate-100 pt-3 text-xs text-slate-600" x-show="! loading && ! failed" x-cloak>
        @foreach ($legend === null ? $types : \Illuminate\Support\Arr::only($types, $legend) as $type)
            <li class="flex items-center gap-1.5">
                <span class="inline-block h-2.5 w-2.5 shrink-0 rounded-full" style="background-color: {{ $type['color'] }}"></span>
                <x-icon :name="$type['icon']" class="h-3 w-3 text-slate-400" />
                {{ __($type['label']) }}
            </li>
        @endforeach
    </ul>
</div>