@props([
    'id',
    'name',
    'value' => null,
    'placeholder' => null,
    'required' => false,
    'disabled' => false,
    'min' => null,
    'max' => null,
    'clearable' => true,
    'showToday' => true,
    'inputAttributes' => [],
    'locale' => null,
    'labels' => [],
])

@php
    $placeholder = $placeholder ?: __('kview-ui-core::ui.date_picker.placeholder');
    $locale = $locale ?: str_replace('_', '-', app()->getLocale());
    $datePickerLabels = array_merge([
        'clear' => __('kview-ui-core::ui.date_picker.clear_action'),
        'today' => __('kview-ui-core::ui.date_picker.today'),
        'previous' => __('kview-ui-core::ui.date_picker.previous'),
        'previousYears' => __('kview-ui-core::ui.date_picker.previous_years'),
        'next' => __('kview-ui-core::ui.date_picker.next'),
        'nextYears' => __('kview-ui-core::ui.date_picker.next_years'),
        'chooseMonth' => __('kview-ui-core::ui.date_picker.choose_month'),
        'chooseYear' => __('kview-ui-core::ui.date_picker.choose_year'),
        'yearRange' => __('kview-ui-core::ui.date_picker.year_range'),
        'weekdays' => __('kview-ui-core::ui.date_picker.weekdays'),
    ], $labels);
    $inputAttributeBag = new \Illuminate\View\ComponentAttributeBag($inputAttributes);
    $rawValue = old($name, $value ?? '');

    if ($rawValue instanceof \DateTimeInterface) {
        $rawValue = $rawValue->format('Y-m-d');
    }

    $rawValue = (string) $rawValue;
    $popoverId = $id.'_popover';
@endphp

<div
    {{ $attributes->class('ui-date-picker')->merge([
        'data-ui-date-picker' => true,
        'data-ui-date-placeholder' => $placeholder,
        'data-ui-date-clearable' => $clearable ? 'true' : 'false',
        'data-ui-date-show-today' => $showToday ? 'true' : 'false',
        'data-ui-date-locale' => $locale,
        'data-ui-date-labels' => json_encode($datePickerLabels, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES),
    ]) }}
>
    <input
        {{ $inputAttributeBag->class('ui-date-picker-native')->merge([
            'id' => $id,
            'type' => 'date',
            'name' => $name,
            'value' => $rawValue,
            'min' => $min,
            'max' => $max,
            'data-ui-date-native' => true,
        ]) }}
        @required($required)
        @disabled($disabled)
    >

    <button
        type="button"
        class="ui-date-picker-trigger"
        aria-haspopup="dialog"
        aria-expanded="false"
        aria-controls="{{ $popoverId }}"
        data-ui-date-trigger
        @disabled($disabled)
    >
        <x-ui.icon name="calendar" size="16" class="ui-date-picker-icon" />
        <span class="ui-date-picker-trigger-label" data-ui-date-label>{{ $rawValue !== '' ? $rawValue : $placeholder }}</span>
    </button>

    @if ($clearable)
        <button
            type="button"
            class="ui-date-picker-clear"
            aria-label="{{ __('kview-ui-core::ui.date_picker.clear') }}"
            data-ui-date-clear
            @disabled($disabled || $required || $rawValue === '')
            @hidden($rawValue === '')
        >
            <x-ui.icon name="x" size="14" />
        </button>
    @endif

    <div
        id="{{ $popoverId }}"
        class="ui-date-picker-popover ui-scrollbar"
        role="dialog"
        aria-modal="false"
        hidden
        data-ui-date-popover
    ></div>
</div>