{% import '_includes/forms' as forms %}
{% import 'verbb-base/_macros' as macros %}

{% set handle = integration.handle %}
{% set displayName = integration.displayName() %}
{% set formSettings = integration.getFormSettings().getSettings() %}
{% set matchLead = form.settings.integrations[handle].matchLead ?? '' %}

{% set mapToContact = form.settings.integrations[handle].mapToContact ?? '' %}
{% set mapToLead = form.settings.integrations[handle].mapToLead ?? '' %}
{% set mapToOpportunity = form.settings.integrations[handle].mapToOpportunity ?? '' %}
{% set mapToAccount = form.settings.integrations[handle].mapToAccount ?? '' %}
{% set mapToCase = form.settings.integrations[handle].mapToCase ?? '' %}
{% set mapToCampaignMember = form.settings.integrations[handle].mapToCampaignMember ?? '' %}

{% set duplicateLeadTask = form.settings.integrations[handle].duplicateLeadTask ?? '' %}
{% set duplicateLeadTaskSubject = form.settings.integrations[handle].duplicateLeadTaskSubject ?? '' %}

{% set mapToContactAttachments = form.settings.integrations[handle].mapToContactAttachments ?? '' %}
{% set mapToLeadAttachments = form.settings.integrations[handle].mapToLeadAttachments ?? '' %}
{% set mapToOpportunityAttachments = form.settings.integrations[handle].mapToOpportunityAttachments ?? '' %}
{% set mapToAccountAttachments = form.settings.integrations[handle].mapToAccountAttachments ?? '' %}
{% set mapToCaseAttachments = form.settings.integrations[handle].mapToCaseAttachments ?? '' %}

<field-select
    label="{{ 'Opt-In Field' | t('formie') }}"
    instructions="{{ 'Choose a field to opt-in to {name}. For example, you might only wish to record user data if they provide a value for a field of your choice - commonly, an Agree field.' | t('formie', { name: displayName }) }}"
    id="opt-in-field"
    name="optInField"
    :value="get(form, 'settings.integrations.{{ handle }}.optInField')"
></field-select>

<hr>

<integration-form-settings handle="{{ handle }}" :form-settings="{{ formSettings | json_encode }}">
    <template v-slot="{ get, isEmpty, input, settings, sourceId, loading, refresh, error, errorMessage, getSourceFields }">
        <div class="field">
            <button class="btn" :class="{ 'fui-loading fui-loading-sm': loading }" data-icon="refresh" @click.prevent="refresh">{{ 'Refresh Integration' | t('formie') }}</button>
        </div>

        <div v-if="error" class="error" style="margin-top: 10px;" v-cloak>
            <span data-icon="alert"></span>
            <span v-html="errorMessage"></span>
        </div>

        {{ forms.lightswitchField({
            label: 'Map to Contact' | t('formie'),
            instructions: 'Whether to map form data to {name} {label}.' | t('formie', { name: displayName, label: 'Contacts' }),
            id: 'mapToContact',
            name: 'mapToContact',
            on: mapToContact,
            toggle: 'map-to-contact',
        }) }}

        <div id="map-to-contact" class="{{ not mapToContact ? 'hidden' }}">
            {{ forms.lightswitchField({
                label: 'Attach File Uploads' | t('formie'),
                instructions: 'Whether all File Upload fields should upload their files as attachments.' | t('formie', { name: displayName }),
                id: 'mapToContactAttachments',
                name: 'mapToContactAttachments',
                on: mapToContactAttachments,
            }) }}

            <integration-field-mapping
                label="{{ 'Contact Field Mapping' | t('formie') }}"
                instructions="{{ 'Choose how your form fields should map to your {name} {label} fields.' | t('formie', { name: displayName, label: 'Contact' }) }}"
                name-label="{{ integration.displayName() }}"
                id="contact-field-mapping"
                name="contactFieldMapping"
                :value="get(form, 'settings.integrations.{{ handle }}.contactFieldMapping')"
                :rows="get(settings, 'contact')"
            ></integration-field-mapping>

            <ul v-if="!isEmpty(get(form, 'settings.integrations.{{ handle }}.errors.contactFieldMapping'))" class="errors" v-cloak>
                <li v-for="(error, index) in get(form, 'settings.integrations.{{ handle }}.errors.contactFieldMapping')" :key="index">
                    ${ error }
                </li>
            </ul>
        </div>

        {{ forms.lightswitchField({
            label: 'Map to Lead' | t('formie'),
            instructions: 'Whether to map form data to {name} {label}.' | t('formie', { name: displayName, label: 'Leads' }),
            id: 'mapToLead',
            name: 'mapToLead',
            on: mapToLead,
            toggle: 'map-to-lead',
        }) }}

        <div id="map-to-lead" class="{{ not mapToLead ? 'hidden' }}">
            {{ forms.lightswitchField({
                label: 'Attach File Uploads' | t('formie'),
                instructions: 'Whether all File Upload fields should upload their files as attachments.' | t('formie', { name: displayName }),
                id: 'mapToLeadAttachments',
                name: 'mapToLeadAttachments',
                on: mapToLeadAttachments,
            }) }}

            {{ forms.lightswitchField({
                label: 'Create Task for Duplicates' | t('formie'),
                instructions: 'If a Lead is detected as duplicate, a new {name} Task object will be created.' | t('formie', { name: displayName }),
                id: 'duplicateLeadTask',
                name: 'duplicateLeadTask',
                on: duplicateLeadTask,
                toggle: 'duplicate-lead-task',
            }) }}

            <div id="duplicate-lead-task" class="{{ not duplicateLeadTask ? 'hidden' }}">
                {{ forms.textField({
                    label: 'Task Subject' | t('formie'),
                    instructions: 'Enter a subject to use for the created task.' | t('formie'),
                    name: 'duplicateLeadTaskSubject',
                    value: duplicateLeadTaskSubject,
                }) }}
            </div>

            <integration-field-mapping
                label="{{ 'Lead Field Mapping' | t('formie') }}"
                instructions="{{ 'Choose how your form fields should map to your {name} {label} fields.' | t('formie', { name: displayName, label: 'Lead' }) }}"
                name-label="{{ integration.displayName() }}"
                id="lead-field-mapping"
                name="leadFieldMapping"
                :value="get(form, 'settings.integrations.{{ handle }}.leadFieldMapping')"
                :rows="get(settings, 'lead')"
            ></integration-field-mapping>

            <ul v-if="!isEmpty(get(form, 'settings.integrations.{{ handle }}.errors.leadFieldMapping'))" class="errors" v-cloak>
                <li v-for="(error, index) in get(form, 'settings.integrations.{{ handle }}.errors.leadFieldMapping')" :key="index">
                    ${ error }
                </li>
            </ul>
        </div>

        {{ forms.lightswitchField({
            label: 'Map to Opportunity' | t('formie'),
            instructions: 'Whether to map form data to {name} {label}.' | t('formie', { name: displayName, label: 'Opportunitys' }),
            id: 'mapToOpportunity',
            name: 'mapToOpportunity',
            on: mapToOpportunity,
            toggle: 'map-to-opportunity',
        }) }}

        <div id="map-to-opportunity" class="{{ not mapToOpportunity ? 'hidden' }}">
            {{ forms.lightswitchField({
                label: 'Attach File Uploads' | t('formie'),
                instructions: 'Whether all File Upload fields should upload their files as attachments.' | t('formie', { name: displayName }),
                id: 'mapToOpportunityAttachments',
                name: 'mapToOpportunityAttachments',
                on: mapToOpportunityAttachments,
            }) }}

            <integration-field-mapping
                label="{{ 'Opportunity Field Mapping' | t('formie') }}"
                instructions="{{ 'Choose how your form fields should map to your {name} {label} fields.' | t('formie', { name: displayName, label: 'Opportunity' }) }}"
                name-label="{{ integration.displayName() }}"
                id="opportunity-field-mapping"
                name="opportunityFieldMapping"
                :value="get(form, 'settings.integrations.{{ handle }}.opportunityFieldMapping')"
                :rows="get(settings, 'opportunity')"
            ></integration-field-mapping>

            <ul v-if="!isEmpty(get(form, 'settings.integrations.{{ handle }}.errors.opportunityFieldMapping'))" class="errors" v-cloak>
                <li v-for="(error, index) in get(form, 'settings.integrations.{{ handle }}.errors.opportunityFieldMapping')" :key="index">
                    ${ error }
                </li>
            </ul>
        </div>

        {{ forms.lightswitchField({
            label: 'Map to Account' | t('formie'),
            instructions: 'Whether to map form data to {name} {label}.' | t('formie', { name: displayName, label: 'Accounts' }),
            id: 'mapToAccount',
            name: 'mapToAccount',
            on: mapToAccount,
            toggle: 'map-to-account',
        }) }}

        <div id="map-to-account" class="{{ not mapToAccount ? 'hidden' }}">
            {{ forms.lightswitchField({
                label: 'Attach File Uploads' | t('formie'),
                instructions: 'Whether all File Upload fields should upload their files as attachments.' | t('formie', { name: displayName }),
                id: 'mapToAccountAttachments',
                name: 'mapToAccountAttachments',
                on: mapToAccountAttachments,
            }) }}

            <integration-field-mapping
                label="{{ 'Account Field Mapping' | t('formie') }}"
                instructions="{{ 'Choose how your form fields should map to your {name} {label} fields.' | t('formie', { name: displayName, label: 'Account' }) }}"
                name-label="{{ integration.displayName() }}"
                id="account-field-mapping"
                name="accountFieldMapping"
                :value="get(form, 'settings.integrations.{{ handle }}.accountFieldMapping')"
                :rows="get(settings, 'account')"
            ></integration-field-mapping>

            <ul v-if="!isEmpty(get(form, 'settings.integrations.{{ handle }}.errors.accountFieldMapping'))" class="errors" v-cloak>
                <li v-for="(error, index) in get(form, 'settings.integrations.{{ handle }}.errors.accountFieldMapping')" :key="index">
                    ${ error }
                </li>
            </ul>
        </div>

        {{ forms.lightswitchField({
            label: 'Map to Case' | t('formie'),
            instructions: 'Whether to map form data to {name} {label}.' | t('formie', { name: displayName, label: 'Cases' }),
            id: 'mapToCase',
            name: 'mapToCase',
            on: mapToCase,
            toggle: 'map-to-case',
        }) }}

        <div id="map-to-case" class="{{ not mapToCase ? 'hidden' }}">
            {{ forms.lightswitchField({
                label: 'Attach File Uploads' | t('formie'),
                instructions: 'Whether all File Upload fields should upload their files as attachments.' | t('formie', { name: displayName }),
                id: 'mapToCaseAttachments',
                name: 'mapToCaseAttachments',
                on: mapToCaseAttachments,
            }) }}

            <integration-field-mapping
                label="{{ 'Case Field Mapping' | t('formie') }}"
                instructions="{{ 'Choose how your form fields should map to your {name} {label} fields.' | t('formie', { name: displayName, label: 'Case' }) }}"
                name-label="{{ integration.displayName() }}"
                id="case-field-mapping"
                name="caseFieldMapping"
                :value="get(form, 'settings.integrations.{{ handle }}.caseFieldMapping')"
                :rows="get(settings, 'case')"
            ></integration-field-mapping>

            <ul v-if="!isEmpty(get(form, 'settings.integrations.{{ handle }}.errors.caseFieldMapping'))" class="errors" v-cloak>
                <li v-for="(error, index) in get(form, 'settings.integrations.{{ handle }}.errors.caseFieldMapping')" :key="index">
                    ${ error }
                </li>
            </ul>
        </div>

        {{ forms.lightswitchField({
            label: 'Map to Campaign Member' | t('formie'),
            instructions: 'Whether to map form data to {name} {label}.' | t('formie', { name: displayName, label: 'Campaign Members' }),
            id: 'mapToCampaignMember',
            name: 'mapToCampaignMember',
            on: mapToCampaignMember,
            toggle: 'map-to-campaign-member',
        }) }}

        <div id="map-to-campaign-member" class="{{ not mapToCampaignMember ? 'hidden' }}">
            <integration-field-mapping
                label="{{ 'Campaign Member Field Mapping' | t('formie') }}"
                instructions="{{ 'Choose how your form fields should map to your {name} {label} fields.' | t('formie', { name: displayName, label: 'Campaign Member' }) }}"
                name-label="{{ integration.displayName() }}"
                id="campaign-member-field-mapping"
                name="campaignMemberFieldMapping"
                :value="get(form, 'settings.integrations.{{ handle }}.campaignMemberFieldMapping')"
                :rows="get(settings, 'campaignMember')"
            ></integration-field-mapping>

            <ul v-if="!isEmpty(get(form, 'settings.integrations.{{ handle }}.errors.campaignMemberFieldMapping'))" class="errors" v-cloak>
                <li v-for="(error, index) in get(form, 'settings.integrations.{{ handle }}.errors.campaignMemberFieldMapping')" :key="index">
                    ${ error }
                </li>
            </ul>
        </div>
    </template>
</integration-form-settings>