<template>
    <span class="salesforce-webchat"></span>
</template>

<script>
// Supporting files
import { initializeSalesforceWebchatForDev } from "./salesforce-helper-dev";
import { initializeSalesforceWebchatForQa } from "./salesforce-helper-qa";
import { initializeSalesforceWebchatForProd } from "./salesforce-helper-prod";

export default {
    name: "salesforceWebchat",
    data() {
        return {};
    },
    props: {
        hideSalesforceWebchatLaunchButton: {
            type: Boolean,
            default: false,
        },
    },
    mounted() {
        // Load in script from salesforce CDN
        const script = document.createElement("script");
        script.src = "https://service.force.com/embeddedservice/5.0/esw.min.js";
        script.onload = this.initializeSalesforceWebchat;
        document.body.appendChild(script);
    },
    methods: {
        initializeSalesforceWebchat() {
            console.log(
                "process.env.VUE_APP_CURRENT_ENVIRONMENT",
                process.env.VUE_APP_CURRENT_ENVIRONMENT
            );
            switch (process.env.VUE_APP_CURRENT_ENVIRONMENT) {
                case "Prod":
                    console.log("Prod");
                    initializeSalesforceWebchatForProd();
                    break;
                case "QA":
                case "SysTest":
                    console.log("QA");
                    initializeSalesforceWebchatForQa();
                    break;
                case "Dev":
                case "Localhost":
                    console.log("Dev");
                    initializeSalesforceWebchatForDev();
                    break;
            }
        },
    },
    computed: {},
    components: {},
};
</script>

<style type="text/css">
.embeddedServiceHelpButton .helpButton .uiButton {
    background-color: #167cac;
    font-family: "Arial", sans-serif;
}
.embeddedServiceHelpButton .helpButton .uiButton:focus {
    outline: 1px solid #167cac;
}
</style>
