@props([
    'id' => 'status-icon-ajax-filter',
    'label' => 'Status:',
    'hiddenSelectId' => '',
    'statuses' => [],
    'labelClass' => 'form-label my_HalfFrame my_HalfFrameFilter my_FilterStatus',
    'wrapperClass' => 'input-group wyszukiwarka',
    'clearTitle' => 'Wyczysc status',
    'clearIconClass' => 'fas fa-times-circle fa-lg',
    'clearBtnClass' => 'btn btn-secondary btn_table_status',
])

@php
    $jsId = preg_replace('/[^A-Za-z0-9_-]/', '_', (string) $id);
    $hiddenSelectId = trim((string) $hiddenSelectId);
@endphp

<div id="{{ $id }}" class="status-icon-ajax-filter-root">
    <div class="{{ $wrapperClass }}">
        <label class="{{ $labelClass }}" for="{{ $hiddenSelectId !== '' ? $hiddenSelectId : null }}">{{ $label }}</label>

        @foreach((array) $statuses as $status)
            @php
                $value = (string) ($status['value'] ?? '');
                $title = (string) ($status['title'] ?? '');
                $btnClass = trim((string) ($status['btn_class'] ?? 'btn-secondary'));
                $iconClass = trim((string) ($status['icon_class'] ?? 'fas fa-circle fa-lg'));
                $marginRight = (string) ($status['margin_right'] ?? '3px');
            @endphp
            <span class="my_FilterStatus" data-status-wrapper>
                <button
                    type="button"
                    class="btn {{ $btnClass }} btn_table_status status-icon-ajax-filter-btn"
                    data-status-value="{{ $value }}"
                    data-toggle="tooltip"
                    title="{{ $title }}"
                    style="margin-right: {{ $marginRight }};"
                >
                    <i class="{{ $iconClass }}"></i>
                </button>
            </span>
        @endforeach

        <span class="my_FilterStatusNone">
            <button
                type="button"
                class="{{ $clearBtnClass }} status-icon-ajax-filter-clear"
                data-toggle="tooltip"
                title="{{ $clearTitle }}"
            >
                <i class="{{ $clearIconClass }}"></i>
            </button>
        </span>
    </div>
</div>

<script>
    (function () {
        var rootSelector = '#{{ $id }}';
        var hiddenSelectSelector = {!! json_encode($hiddenSelectId !== '' ? ('#' . $hiddenSelectId) : '') !!};
        var ns = '.{{ $jsId }}';

        if (!hiddenSelectSelector) {
            return;
        }

        function getCurrentValue() {
            var $select = $(hiddenSelectSelector);
            if (!$select.length) {
                return '';
            }
            return String($select.val() == null ? '' : $select.val());
        }

        function applyActiveState(value) {
            var current = String(value == null ? '' : value);

            $(rootSelector).find('[data-status-wrapper]').removeClass('active');
            $(rootSelector).find('.status-icon-ajax-filter-btn').each(function () {
                var $btn = $(this);
                var btnValue = String($btn.data('status-value') == null ? '' : $btn.data('status-value'));
                if (btnValue === current && current !== '') {
                    $btn.closest('[data-status-wrapper]').addClass('active');
                }
            });
        }

        function setStatus(value) {
            var $select = $(hiddenSelectSelector);
            if (!$select.length) {
                return;
            }

            var nextValue = String(value == null ? '' : value);
            if (String($select.val() == null ? '' : $select.val()) === nextValue) {
                applyActiveState(nextValue);
                return;
            }

            $select.val(nextValue).trigger('change');
            applyActiveState(nextValue);
        }

        $(document).on('click' + ns, rootSelector + ' .status-icon-ajax-filter-btn', function () {
            var value = String($(this).data('status-value') == null ? '' : $(this).data('status-value'));
            setStatus(value);
        });

        $(document).on('click' + ns, rootSelector + ' .status-icon-ajax-filter-clear', function () {
            setStatus('');
        });

        $(document).on('change' + ns, hiddenSelectSelector, function () {
            applyActiveState(getCurrentValue());
        });

        $(function () {
            applyActiveState(getCurrentValue());
        });
    })();
</script>