<template>
    <div class="mb-3">
        <label for="smseagle-url" class="form-label">{{ $t("smseagleUrl") }}</label>
        <input
            id="smseagle-url"
            v-model="$parent.notification.smseagleUrl"
            type="text"
            minlength="7"
            class="form-control"
            placeholder="http://127.0.0.1"
            required
        />
    </div>
    <div class="mb-3">
        <label for="smseagle-token" class="form-label">{{ $t("smseagleToken") }}</label>
        <HiddenInput id="smseagle-token" v-model="$parent.notification.smseagleToken" :required="true"></HiddenInput>
    </div>
    <div class="mb-3">
        <label for="smseagle-api-type" class="form-label">{{ $t("smseagleApiType") }}</label>
        <select id="smseagle-api-type" v-model="$parent.notification.smseagleApiType" class="form-select">
            <option value="smseagle-apiv1" selected>{{ $t("smseagleApiv1") }}</option>
            <option value="smseagle-apiv2">{{ $t("smseagleApiv2") }}</option>
        </select>
        <i18n-t tag="div" keypath="smseagleDocs" class="form-text">
            <a href="https://www.smseagle.eu/api/" target="_blank">https://www.smseagle.eu/api/</a>
        </i18n-t>
    </div>
    <div v-if="$parent.notification.smseagleApiType === 'smseagle-apiv1'" class="mb-3">
        <div class="mb-3">
            <label for="smseagle-recipient-type" class="form-label">{{ $t("smseagleRecipientType") }}</label>
            <select
                id="smseagle-recipient-type"
                v-model="$parent.notification.smseagleRecipientType"
                class="form-select"
            >
                <!-- phone number -->
                <option value="smseagle-to" selected>{{ $t("smseagleTo") }}</option>
                <option value="smseagle-group">{{ $t("smseagleGroup") }}</option>
                <option value="smseagle-contact">{{ $t("smseagleContact") }}</option>
            </select>
        </div>
        <div class="mb-3">
            <label for="smseagle-recipient" class="form-label">{{ $t("smseagleRecipient") }}</label>
            <input
                id="smseagle-recipient"
                v-model="$parent.notification.smseagleRecipient"
                type="text"
                class="form-control"
                required
            />
        </div>
        <div
            v-if="
                $parent.notification.smseagleMsgType === 'smseagle-sms' ||
                $parent.notification.smseagleRecipientType !== 'smseagle-to'
            "
            class="mb-3"
        >
            <label for="smseagle-priority" class="form-label">{{ $t("smseaglePriority") }}</label>
            <input
                id="smseagle-priority"
                v-model="$parent.notification.smseaglePriority"
                type="number"
                class="form-control"
                min="0"
                max="9"
                step="1"
                placeholder="0"
                required
            />
        </div>
        <div
            v-if="
                $parent.notification.smseagleMsgType === 'smseagle-sms' ||
                $parent.notification.smseagleRecipientType !== 'smseagle-to'
            "
            class="mb-3 form-check form-switch"
        >
            <label for="smseagle-encoding" class="form-label">{{ $t("smseagleEncoding") }}</label>
            <input
                id="smseagle-encoding"
                v-model="$parent.notification.smseagleEncoding"
                type="checkbox"
                class="form-check-input"
            />
        </div>
        <div v-if="$parent.notification.smseagleRecipientType === 'smseagle-to'" class="mb-3">
            <div class="mb-3">
                <label for="smseagle-msg-type" class="form-label">{{ $t("smseagleMsgType") }}</label>
                <select id="smseagle-msg-type" v-model="$parent.notification.smseagleMsgType" class="form-select">
                    <option value="smseagle-sms" selected>{{ $t("smseagleMsgSms") }}</option>
                    <option value="smseagle-ring">{{ $t("smseagleMsgRing") }}</option>
                    <option value="smseagle-tts">{{ $t("smseagleMsgTts") }}</option>
                    <option value="smseagle-tts-advanced">{{ $t("smseagleMsgTtsAdvanced") }}</option>
                </select>
            </div>
            <div
                v-if="
                    $parent.notification.smseagleMsgType === 'smseagle-ring' ||
                    $parent.notification.smseagleMsgType === 'smseagle-tts' ||
                    $parent.notification.smseagleMsgType === 'smseagle-tts-advanced'
                "
                class="mb-3"
            >
                <label for="smseagle-duration" class="form-label">{{ $t("smseagleDuration") }}</label>
                <input
                    id="smseagle-duration"
                    v-model="$parent.notification.smseagleDuration"
                    type="number"
                    class="form-control"
                    min="0"
                    max="30"
                    step="1"
                    placeholder="10"
                />
            </div>
            <div v-if="$parent.notification.smseagleMsgType === 'smseagle-tts-advanced'" class="mb-3">
                <label for="smseagle-tts-model" class="form-label">{{ $t("smseagleTtsModel") }}</label>
                <input
                    id="smseagle-tts-model"
                    v-model="$parent.notification.smseagleTtsModel"
                    type="number"
                    class="form-control"
                    placeholder="1"
                    required
                />
            </div>
        </div>
    </div>

    <div v-if="$parent.notification.smseagleApiType === 'smseagle-apiv2'" class="mb-3">
        <div class="mb-3">
            <!-- phone number -->
            <label for="smseagle-recipient-to" class="form-label">{{ $t("smseagleTo") }}</label>
            <input
                id="smseagle-recipient-to"
                v-model="$parent.notification.smseagleRecipientTo"
                type="text"
                class="form-control"
            />
            <i18n-t tag="div" keypath="smseagleComma" class="form-text" />
        </div>
        <div class="mb-3">
            <label for="smseagle-recipient-group" class="form-label">{{ $t("smseagleGroupV2") }}</label>
            <input
                id="smseagle-recipient-group"
                v-model="$parent.notification.smseagleRecipientGroup"
                type="text"
                class="form-control"
            />
            <i18n-t tag="div" keypath="smseagleComma" class="form-text" />
        </div>
        <div class="mb-3">
            <label for="smseagle-recipient-contact" class="form-label">{{ $t("smseagleContactV2") }}</label>
            <input
                id="smseagle-recipient-contact"
                v-model="$parent.notification.smseagleRecipientContact"
                type="text"
                class="form-control"
            />
            <i18n-t tag="div" keypath="smseagleComma" class="form-text" />
        </div>
        <div class="mb-3">
            <label for="smseagle-priority-v2" class="form-label">{{ $t("smseaglePriority") }}</label>
            <input
                id="smseagle-priority-v2"
                v-model="$parent.notification.smseaglePriority"
                type="number"
                class="form-control"
                min="0"
                max="9"
                step="1"
                placeholder="0"
            />
        </div>
        <div class="mb-3 form-check form-switch">
            <label for="smseagle-encoding-v2" class="form-label">{{ $t("smseagleEncoding") }}</label>
            <input
                id="smseagle-encoding-v2"
                v-model="$parent.notification.smseagleEncoding"
                type="checkbox"
                class="form-check-input"
            />
        </div>
        <div class="mb-3">
            <label for="smseagle-msg-type-v2" class="form-label">{{ $t("smseagleMsgType") }}</label>
            <select id="smseagle-msg-type-v2" v-model="$parent.notification.smseagleMsgType" class="form-select">
                <option value="smseagle-sms" selected>{{ $t("smseagleMsgSms") }}</option>
                <option value="smseagle-ring">{{ $t("smseagleMsgRing") }}</option>
                <option value="smseagle-tts">{{ $t("smseagleMsgTts") }}</option>
                <option value="smseagle-tts-advanced">{{ $t("smseagleMsgTtsAdvanced") }}</option>
            </select>
        </div>
        <div
            v-if="$parent.notification.smseagleMsgType && $parent.notification.smseagleMsgType !== 'smseagle-sms'"
            class="mb-3"
        >
            <label for="smseagle-duration-v2" class="form-label">{{ $t("smseagleDuration") }}</label>
            <input
                id="smseagle-duration-v2"
                v-model="$parent.notification.smseagleDuration"
                type="number"
                class="form-control"
                min="0"
                max="30"
                step="1"
                placeholder="10"
            />
        </div>
        <div v-if="$parent.notification.smseagleMsgType === 'smseagle-tts-advanced'" class="mb-3">
            <label for="smseagle-tts-model-v2" class="form-label">{{ $t("smseagleTtsModel") }}</label>
            <input
                id="smseagle-tts-model-v2"
                v-model="$parent.notification.smseagleTtsModel"
                type="number"
                class="form-control"
                placeholder="1"
                required
            />
        </div>
    </div>
</template>

<script>
import HiddenInput from "../HiddenInput.vue";

export default {
    components: {
        HiddenInput,
    },
    mounted() {
        if (!this.$parent.notification.smseagleApiType) {
            this.$parent.notification.smseagleApiType = "smseagle-apiv1";
        }
        if (!this.$parent.notification.smseagleMsgType) {
            this.$parent.notification.smseagleMsgType = "smseagle-sms";
        }
        if (!this.$parent.notification.smseagleRecipientType) {
            this.$parent.notification.smseagleRecipientType = "smseagle-to";
        }
    },
};
</script>
