<template>
    <csc-page-sticky
        id="csc-page-customer-phonebook-add"
        ref="pageSticky"
    >
        <template
            #header
        >
            <q-breadcrumbs
                class="absolute-left q-ml-md q-mb-lg text-weight-light"
                active-color="primary"
                separator-color="primary"
            >
                <q-breadcrumbs-el
                    class="cursor-pointer"
                    to="/user/pbx-configuration/customer-phonebook"
                    :label="$t('Upload CSV')"
                    icon="fas fa-upload"
                />
            </q-breadcrumbs>
        </template>
        <div
            class="row q-col-gutter-md q-pa-md"
        >
            <q-item
                class="col-12 col-md-7"
            >
                <q-list
                    class="col col-xs-12"
                    side
                    top
                    no-wrap
                >
                    <csc-input-file
                        accept=".csv"
                        data-cy="sendfax-fileinput"
                        @file-selected="toggleFileSelected"
                    />
                    <br>
                    <q-toggle
                        v-model="formData.purge_existing"
                        dense
                        :label="$t('Purge existing')"
                        data-cy="phonebook-purge"
                        :disable="loading"
                    />
                </q-list>
            </q-item>
            <div
                class="col-12 col-md-5 q-pb-lg"
            >
                <q-card
                    flat
                    bordered
                    class="full-height"
                >
                    <q-card-section>
                        <div
                            class="text-subtitle1 text-weight-medium q-mb-sm"
                        >
                            {{ csvFormatTitle }}
                        </div>
                        <div
                            class="text-body2 text-weight-bold"
                        >
                            {{ csvExpectedFileFormatLabel }}
                        </div>
                        <div
                            class="q-mb-md"
                        >
                            <pre
                                class="q-ma-none text-body2 text-left"
                            >{{ csvFileName }}</pre>
                        </div>
                        <div
                            class="text-body2 text-weight-bold"
                        >
                            {{ csvBodyLabel }}
                        </div>
                        <pre
                            class="q-ma-none text-body2 text-left"
                        >{{ csvFormatBody }}</pre>
                    </q-card-section>
                </q-card>
            </div>
        </div>
        <div class="text-center">
            <q-btn
                icon="clear"
                color="white"
                flat
                :label="$t('Cancel')"
                @click="cancel"
            />
            <q-btn
                icon="check"
                :label="$t('Confirm')"
                unelevated
                text-color="primary"
                @click="confirm"
            />
        </div>
    </csc-page-sticky>
</template>
<script>
import useValidate from '@vuelidate/core'
import { required } from '@vuelidate/validators'
import CscPageSticky from 'components/CscPageSticky'
import CscInputFile from 'components/form/CscInputFile'
import { mapWaitingActions } from 'vue-wait-vue3'
import { mapGetters } from 'vuex'
export default {
    name: 'CscPageCustomerPhonebookUpload',
    components: {
        CscPageSticky,
        CscInputFile
    },
    validations: {
        formData: {
            file: {
                required
            }
        }
    },
    emits: ['cancel'],
    data () {
        return {
            formData: this.getDefaultFormData(),
            v$: useValidate()
        }
    },
    computed: {
        csvFormatTitle () {
            return 'CSV formatting guide'
        },
        csvExpectedFileFormatLabel () {
            return 'Expected file format'
        },
        csvFileName () {
            return 'filename.csv'
        },
        csvBodyLabel () {
            return 'Body'
        },
        csvFormatBody () {
            return [
                'name,number',
                'Alice, 111',
                'Bob, 222',
                'Carol, 333'
            ].join('\n')
        }
    },
    methods: {
        ...mapWaitingActions('user', {
            uploadPhonebookCustomer: 'uploadPhonebookCustomer'
        }),
        ...mapGetters('user', [
            'getCustomerId'
        ]),
        getDefaultFormData () {
            return {
                file: null,
                purge_existing: false,
                customerId: this.getCustomerId()
            }
        },
        cancel () {
            this.$router.push('/user/pbx-configuration/customer-phonebook/')
            this.$emit('cancel')
        },
        async confirm () {
            await this.uploadPhonebookCustomer(this.formData)
            await this.$router.push('/user/pbx-configuration/customer-phonebook/')
        },
        toggleFileSelected (value) {
            this.formData.file = value
        }
    }
}
</script>
