{% import "_includes/forms" as forms %}

{% do view.registerTranslations('commerce', [
"Example"
]) %}

<div>
{{ forms.textField({
    first: true,
    label: "Name"|t('commerce'),
    instructions: "What this shipping zone will be called in the control panel."|t('commerce'),
    id: 'name',
    name: 'name',
    value: shippingZone is defined ? shippingZone.name,
    errors: shippingZone is defined ? shippingZone.getErrors('name'),
    autofocus: true,
    required: true
}) }}

{{ forms.textField({
    label: "Description"|t('commerce'),
    instructions: "Describe this shipping zone."|t('commerce'),
    id: 'description',
    name: 'description',
    value: shippingZone is defined ? shippingZone.description,
    errors: shippingZone is defined ? shippingZone.getErrors('description'),
}) }}

{{ forms.radioGroupField({
    label: 'Type'|t('commerce'),
    id: 'isCountryBased',
    name: 'isCountryBased',
    options: {1 : 'Country-based'|t('commerce'), 0 : 'State-based'|t('commerce')},
    value: shippingZone is defined ? shippingZone.isCountryBased,
    errors: shippingZone is defined ? shippingZone.getErrors('isCountryBased'),
    required: true,
}) }}

{{ forms.multiselectField({
    label: 'Countries'|t('commerce'),
    instructions: 'Choose the countries that this zone applies to.'|t('commerce'),
    id: 'countries',
    name: 'countries',
    options: countries,
    values: shippingZone is defined ? shippingZone.getCountryIds(),
    errors: shippingZone is defined ? shippingZone.getErrors('countries'),
    required: true,
    class: 'selectize fullwidth',
}) }}

{{ forms.multiselectField({
    label: 'States'|t('commerce'),
    id: 'states',
    instructions: 'Choose the states that this zone applies to.'|t('commerce'),
    name: 'states',
    options: states,
    values: shippingZone is defined ? shippingZone.getStateIds(),
    errors: shippingZone is defined ? shippingZone.getErrors('states'),
    required: true,
    class: 'selectize fullwidth',
}) }}

{% embed '_includes/forms/field' with {
    label: 'Zip Code Condition Formula'|t('commerce'),
    id: 'zipCodeConditionFormula',
    rows: 5,
    instructions: 'Specify a <a href="{url}">Twig condition</a> that determines whether the shipping zone should include a given Zip/postal code. (The Zip/postal code can be referenced via a `zipCode` variable.)'|t('commerce', {
        url: 'https://twig.symfony.com/doc/2.x/templates.html#expressions',
    }),
    errors: shippingZone is defined ? shippingZone.getErrors('zipCodeConditionFormula'),
    } %}
    {% block input %}
        {% import "_includes/forms" as forms %}
        <div id="zipCodeField" class="flex flex-nowrap" style="align-items: stretch;">
            <div  class="zip-condition">
                {{ forms.textarea({
                    value: shippingZone is defined ? shippingZone.zipCodeConditionFormula,
                    name: 'zipCodeConditionFormula',
                    class: 'code',
                    rows: 5,
                    placeholder: 'Example'|t('commerce') ~ ': zipCode[0:2] == \'NG\''
                }) }}
            </div>

            <div class="zip-test pane first">
                {% embed '_includes/forms/field' with {
                    label: 'Test Zip Code'|t('commerce'),
                    class: 'zip-test-input',
                    instructions: 'Type a test zip to see if your match works.'|t('commerce'),
                    fieldClass: 'last'
                } only %}
                    {% block input %}
                        {% import "_includes/forms" as forms %}
                        <div class="zip-test-input">
                            {{ forms.text({
                                class: 'code',
                            }) }}
                            <div class="zip-test-status">
                                <div class="zip-test-status-icon success hidden" title="Codition matches zip code" data-icon="check"></div>
                                <div class="zip-test-status-icon failure hidden" title="Condition does not match the zip code" data-icon="remove"></div>
                                <div class="zip-test-status-spinner spinner hidden"></div>
                            </div>
                        </div>
                    {% endblock %}
                {% endembed %}
            </div>
        </div>
    {% endblock %}
{% endembed %}

</div>
{% set countriesId = 'countries'|namespaceInputId|e('js') %}
{% set statesId = 'states'|namespaceInputId|e('js') %}
{% set isCountryBasedName = 'isCountryBased'|namespaceInputName|e('js') %}

{% js %}
    $('#{{ countriesId }}, #{{ statesId }}').selectize({
        plugins: ['remove_button'],
        dropdownParent: 'body'
    });

    $('[name="{{ isCountryBasedName }}"]').change(function () {
    if (!$(this).is(':checked')) {
        return;
    }

    if ($(this).val() * 1) {
        $('#{{ countriesId }}')[0].selectize.enable();
        $('#{{ statesId }}')[0].selectize.disable();
        $('#{{ countriesId }}-field').show();
        $('#{{ statesId }}-field').hide();
    } else {
        $('#{{ countriesId }}')[0].selectize.disable();
        $('#{{ statesId }}')[0].selectize.enable();
        $('#{{ countriesId }}-field').hide();
        $('#{{ statesId }}-field').show();
    }
    });

    $('[name="{{ isCountryBasedName }}"]:checked').trigger('change');

    // setup for debouncing
    var typingTimer;                //timer identifier
    var doneTypingInterval = 1000;  //time in ms, 5 second for example

    // top level fov containing the field
    var $zipCodeField = $('#zipCodeField');

    var $zipCodeConditionFormula = $zipCodeField.find('textarea[name="zipCodeConditionFormula"]').first();
    var $testZipCode = $zipCodeField.find('.zip-test-input input').first();
    var $zipTestStatus = $zipCodeField.find('.zip-test-status').first();
    var $zipTestStatusSuccess = $zipTestStatus.find('.zip-test-status-icon.success');
    var $zipTestStatusFailed = $zipTestStatus.find('.zip-test-status-icon.failure');
    var $zipTestStatusSpinner = $zipTestStatus.find('.zip-test-status-spinner');

    function startedTyping () {
        if($zipCodeConditionFormula.val() == ''){
            $zipTestStatusSpinner.addClass('hidden');
            $zipTestStatusFailed.addClass('hidden');
            $zipTestStatusSuccess.addClass('hidden');
            return;
        }
        $zipTestStatusSpinner.removeClass('hidden');
        $zipTestStatusFailed.addClass('hidden');
        $zipTestStatusSuccess.addClass('hidden');
    }

    //on keyup, start the countdown
    $testZipCode.on('keyup', function () {
        clearTimeout(typingTimer);
        typingTimer = setTimeout(doneTyping, doneTypingInterval);
        startedTyping();
    });

    //on keyup, start the countdown
    $zipCodeConditionFormula.on('keyup', function () {
        clearTimeout(typingTimer);
        typingTimer = setTimeout(doneTyping, doneTypingInterval);
        startedTyping();
    });

    //on keydown, clear the countdown
    $zipCodeConditionFormula.on('keydown', function () {
        clearTimeout(typingTimer);
    });

    //user is "finished typing," do something
    function doneTyping () {

        $.post({
            url: Craft.getActionUrl('commerce/formulas/validate-condition'),
            data: {
                condition: $zipCodeConditionFormula.val(),
                params: { zipCode : '' }
            },
            dataType: 'json',
            headers: {
                'X-CSRF-Token': Craft.csrfTokenValue
            },
            success: function(data){
                if(data.hasOwnProperty('error')){
                    $zipCodeConditionFormula.addClass('error');
                    $zipTestStatusSpinner.addClass('hidden');
                }else{
                    $zipCodeConditionFormula.removeClass('error');
                    $.post({
                        url: Craft.getActionUrl('commerce/shipping-zones/test-zip'),
                        data: {
                            zipCodeConditionFormula: $zipCodeConditionFormula.val(),
                            testZipCode : $testZipCode.val()
                        },
                        dataType: 'json',
                        headers: {
                            'X-CSRF-Token': Craft.csrfTokenValue
                        },
                        success: function(data){
                            $zipTestStatusSpinner.addClass('hidden');

                            if(data.hasOwnProperty('error')){
                                $zipTestStatusFailed.removeClass('hidden');
                            }else {
                                $zipTestStatusSuccess.removeClass('hidden');
                            }
                        }
                    });
                }
            }
        });
    }
{% endjs %}
{% css %}
    .zip-test{
        background-color: #f1f5f8;
        box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
        padding: 12px 14px;
    }

    .zip-test-input {
        position: relative;
    }

    .zip-test-status {
        position: absolute;
        top: 0;
    }

    body.ltr .zip-test-status {
        right: 4px;
    }

    body.rtl .zip-test-status {
        left: 4px;
    }

    .zip-test-status-icon {
        position: relative;
        top: 5px;
        width: 24px;
        text-align: center;
    }

    .zip-test-status-icon.success {
        color: #00b007;
    }

    .zip-test-status-icon.failure {
        color: #da5a47;
    }

{% endcss %}