<template>
    <div class="container">
        <Error v-model="hasError" :message="messageError" />
        <b-input-group v-if="ehInformacaoCEP">
            <b-form-input ref="option" v-model.trim="response" v-on:keydown.enter="sendResponse"></b-form-input>
            <b-input-group-append>
                <b-button variant="primary" v-on:click="sendResponse">Enviar</b-button>
            </b-input-group-append>
        </b-input-group>
        <div v-else class="text-right">
            <b-button v-on:click="confirm(true)" variant="primary" class="m-1">Sim</b-button>
            <b-button v-on:click="confirm(false)" variant="primary" class="m-1">Não</b-button>
        </div>
    </div>
</template>

<script>
import formatter from "@/javascript/formatter"
import step from '@/javascript/constants/step'
import Error from "@/components/Step/Error"

export default {
    name: "CepPernoite",
    components: { Error },
    created() {
        this.$store.dispatch("chat/addContent", {
            isResponse: false,
            description: "Me informe o CEP de onde o veículo passa a noite."
        })
    },
    mounted() {
        this.$refs.option.focus()
    },
    data() {
        return {
            response: "",
            hasError: false,
            messageError: "",
            consultouCEP: false,
            ehInformacaoCEP: true,
            endereco: {
                tipologradouro: "",
                logradouro: "",
                bairro: "",
                numero: "",
                cep:"",
                cidade: "",
                estado: "",
                enderecocompleto: false
            }
        }
    },
    methods: {
        showError(message) {
            this.messageError = message;
            this.hasError = true;
        },
        sendResponse() {
            if (this.consultouCEP) {
                this.confirmacaoEndereco();
            } else {
                this.obterDadosEndereco();
            }
        },
        confirmacaoEndereco() {
            this.$store.dispatch("chat/addResponse", {
                    id: step.AUTOCEPPERNOITE,
                    description: this.response + " - " + this.endereco.cidade + "/" + this.endereco.uf + " - CEP " + this.endereco.cep
            })

            this.$store.dispatch("chat/addContent", {
                isResponse: true,
                description: this.response + " - " + this.endereco.cidade + "/" + this.endereco.uf + " - CEP " + this.endereco.cep
            })

            this.$store.dispatch("chat/nextStep", step.CONTATO)
        },
        confirm(value) {
            this.ehInformacaoCEP = true;

            if (value)
                this.agreed();
            else
                this.disagreed();
        },
        agreed() {
            this.$store.dispatch("chat/addContent", {
                isResponse: true,
                description: "Sim"
            })

            this.$store.dispatch("chat/addContent", {
                isResponse: false,
                description: "Informe o endereço, indicando, bairro, complemento e número!"
            })

            if (this.endereco.enderecocompleto)
                this.response = this.endereco.tipologradouro + " " + this.endereco.logradouro + ", " + this.endereco.bairro;
        },
        disagreed() {
            this.ehInformacaoCEP = true;
            this.$store.dispatch("chat/addContent", {
                isResponse: true,
                description: "Não"
            })

            this.$store.dispatch("chat/addContent", {
                isResponse: false,
                description: "Então me informe o CEP correto de onde o veículo passa a noite."
            })
        },
        async obterDadosEndereco() {
            const cep = formatter.cep(this.response)

            if (cep == "") {
                this.showError("Informe um CEP válido.")
            } else {
                if (this.buscarEnderecoAPI(cep)) {
                    this.$store.dispatch("chat/addContent", {
                        isResponse: true,
                        description: this.endereco.cep + " - " + this.endereco.cidade + "/" + this.endereco.estado
                    })

                    this.$store.dispatch("chat/addContent", {
                        isResponse: false,
                        description: "O CEP e a cidade estão corretos?"
                    })

                    this.response = "";
                    this.consultouCEP = true;
                    this.ehInformacaoCEP = false;
                }
            }
        },
        async buscarEnderecoAPI(cep) {
            try {
                var response = await this.$http.get("http://cep.republicavirtual.com.br/web_cep.php?formato=json&cep=" + cep)

                console.log(response.data)
                if (!response.data || !response.data.resultado) {
                    this.erroBuscarEnderecoAPI();
                    return false;
                }

                if (response.data.resultado == 0) {
                    this.showError("Endereço não encontrado para o CEP informado!")
                    return false;
                }

                this.endereco.enderecocompleto = response.data.resultado == 1;
                this.endereco.tipologradouro = response.data.tipo_logradouro || "";
                this.endereco.logradouro = response.data.logradouro || "";
                this.endereco.bairro = response.data.bairro || "";
                this.endereco.cidade = response.data.cidade || "";
                this.endereco.estado = response.data.uf || "";
                this.endereco.cep = cep;

                return true;

            } catch (error) {
                this.erroBuscarEnderecoAPI();
                return false;
            }
        },
        erroBuscarEnderecoAPI() {
            this.consultouCEP = true;

            this.$store.dispatch("chat/addContent", {
                isResponse: false,
                description: "Houve um erro ao consultar o CEP. Informe o endereço manualmente.(CEP, cidade, estado, rua, bairro e numero)"
            });
        },

    }
}
</script>

<style>
</style>