{% import '_includes/forms' as forms %}
{% set id = id is not defined ? null : id %}
{% set widget = widget is not defined ? null : widget %}

{% if not id %}
    <p>{{ 'An ID must be provided' | t('formie') }}</p>
{% else %}
    <input type="hidden" name="startDate" value="{{ widget.startDate | date('Y-m-d H:i:s') }}" data-start-date>
    <input type="hidden" name="endDate" value="{{ widget.endDate | date('Y-m-d H:i:s') }}" data-end-date>
    <input type="hidden" name="dateRange" value="{{ widget.dateRange ?? '' }}" data-date-range>

    {% set dateRangeHtml %}<div data-date-range-picker></div>{% endset %}

    {{ forms.field({
        label: 'Date Range' | t('app'),
    }, dateRangeHtml) }}

    {% js %}
        var options = {
            selected: '{{ widget.dateRange ?? '' }}',
            onChange: function(start, end, handle) {
                var $startDate = $('#{{ id }} [data-start-date]');
                var $endDate = $('#{{ id }} [data-end-date]');
                var $dateRange = $('#{{ id }} [data-date-range]');
                $startDate.val('');
                $endDate.val('');
                $dateRange.val('');

                if (start) {
                    $startDate.val(start.getTime() / 1000);
                }

                if (end) {
                    $endDate.val(end.getTime() / 1000);
                }

                if (handle) {
                    $dateRange.val(handle);
                }
            }
        };

        {% if widget.dateRange == 'custom' and widget.startDate %}
            options['startDate'] = new Date({{ widget.startDate | date('Y') }}, {{ widget.startDate | date('m') - 1 }}, {{ widget.startDate|date('d') }});
        {% endif %}

        {% if widget.dateRange == 'custom' and widget.endDate %}
            options['endDate'] = new Date({{ widget.endDate | date('Y') }}, {{ widget.endDate | date('m') - 1 }}, {{ widget.endDate|date('d') }});
        {% endif %}

        var $container = $('#{{ id }} [data-date-range-picker]');
        var $picker = Craft.ui.createDateRangePicker(options).appendTo($container);
    {% endjs %}
{% endif %}
