{% 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 channelType = form.settings.integrations[handle].channelType ?? '' %}
{% set webhook = form.settings.integrations[handle].webhook ?? '' %}

{% set values = {
    channelId: form.settings.integrations[handle].channelId ?? '',
    userId: form.settings.integrations[handle].userId ?? '',
    message: form.settings.integrations[handle].message ?? '',
} | json_encode %}

<field-select
    label="{{ 'Opt-In Field' | t('formie') }}"
    instructions="{{ 'Choose a field to opt-in to {name}. For example, you might only wish to subscribe users 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 }}" :values="{{ values }}">
    <template v-slot="{ get, isEmpty, input, settings, sourceId, loading, refresh, error, errorMessage, getSourceFields, model }">
        {{ forms.selectField({
            label: 'Channel Type' | t('formie'),
            instructions: 'Select what type of channel {name} will send the message to.' | t('formie', { name: displayName }),
            name: 'channelType',
            value: channelType,
            toggle: true,
            targetPrefix: 'channel-',
            required: true,
            options: [
                { label: 'Select an option' | t('formie'), value: '' },
                { label: 'Public Channel', value: 'public' },
                { label: 'Direct Message', value: 'directMessage' },
                { label: 'Webhook', value: 'webhook' },
            ],
        }) }}

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

        <div id="channel-public" class="{{ channelType != 'public' ? 'hidden' }}">
            <div class="field">
                <div class="heading">
                    <label id="channelId-label" for="channelId" class="required">{{ 'Channel' | t('formie') }}</label>

                    <div class="instructions">
                        <p>{{ 'Select which {name} channel to post a message to.' | t('formie', { name: displayName }) }}</p>
                    </div>
                </div>

                <div class="input ltr">
                    <div class="select">
                        <select :value="model.channelId" @input="input('model.channelId', $event.target.value)" name="channelId" required>
                            <option value="">{{ 'Select an option' | t('formie') }}</option>

                            <option v-for="(option, index) in get(settings, 'channels')" :key="index" :value="option.id">${ option.name }</option>
                        </select>
                    </div>

                    <button class="btn fui-btn-transparent" :class="{ 'fui-loading fui-loading-sm': loading }" data-icon="refresh" @click.prevent="refresh"></button>
                </div>

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

        <div id="channel-directMessage" class="{{ channelType != 'directMessage' ? 'hidden' }}">
            <div class="field">
                <div class="heading">
                    <label id="userId-label" for="userId" class="required">{{ 'User' | t('app') }}</label>

                    <div class="instructions">
                        <p>{{ 'Select which {name} user to post a message to.' | t('formie', { name: displayName }) }}</p>
                    </div>
                </div>

                <div class="input ltr">
                    <div class="select">
                        <select :value="model.userId" @input="input('model.userId', $event.target.value)" name="userId" required>
                            <option value="">{{ 'Select an option' | t('formie') }}</option>

                            <option v-for="(option, index) in get(settings, 'members')" :key="index" :value="option.id">${ option.name }</option>
                        </select>
                    </div>

                    <button class="btn fui-btn-transparent" :class="{ 'fui-loading fui-loading-sm': loading }" data-icon="refresh" @click.prevent="refresh"></button>
                </div>

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

        <div id="channel-webhook" class="{{ channelType != 'webhook' ? 'hidden' }}">
            {{ forms.textField({
                label: 'Webhook URL' | t('formie'),
                instructions: 'Enter the {name} webhook URL that will be triggered.' | t('formie', { name: displayName }),
                name: 'webhook',
                value: webhook,
                required: true,
            }) }}
        </div>

        <form-kit
            type="richText"
            label="{{ 'Message' | t('formie') }}"
            help="{{ 'This text will be sent to {name}.' | t('formie', { name: displayName }) }}"
            v-model="model.message"
            :required="true"
            variables="plainTextVariables"
            :buttons="['bold', 'italic', 'variableTag']"
        ></form-kit>

        <input type="hidden" name="message" :value="model.message" />
    </template>
</integration-form-settings>