<template>
    <div class="row">
        <div class="col-md-6">
            <section class="card" role="region">
                <div class="card-header bg-primary-dark">
                    <h2 class="card-title">
                        <translate key="lang_hdr_export">Export Media to CSV</translate>
                    </h2>
                </div>

                <div class="card-body">
                    <p class="card-text">
                        <translate key="export_details">Click the button below to generate a CSV file with all of this station's media. You can make any necessary changes, and then import the file using the file picker on the right.</translate>
                    </p>
                    <p class="card-text">
                        <translate key="export_details_2">Note: If your media metadata has UTF-8 characters, you should use a spreadsheet editor that supports UTF-8 encoding, like OpenOffice.</translate>
                    </p>

                    <div class="buttons">
                        <b-button variant="primary" size="lg" block :href="apiUrl">
                            <translate key="btn_export">Export Media to CSV</translate>
                        </b-button>
                    </div>
                </div>
            </section>
        </div>
        <div class="col-md-6">
            <section class="card" role="region">
                <div class="card-header bg-primary-dark">
                    <h2 class="card-title">
                        <translate key="lang_hdr_import">Import Changes from CSV</translate>
                    </h2>
                </div>

                <div class="card-body">
                    <p class="card-text">
                        <translate key="import_details">The format and headers of this CSV should match the format generated by the export function on this page.</translate>
                    </p>

                    <b-form class="form" @submit.prevent="doSubmit">
                        <b-form-group label-for="import_file">
                            <template #label>
                                <translate key="lang_form_import_file">Select CSV File</translate>
                            </template>
                            <b-form-file id="import_modal_playlist_file" v-model="importFile"></b-form-file>
                        </b-form-group>

                        <b-button type="submit" size="lg" block variant="primary" class="mt-2">
                            <translate key="btn_import">Import Changes from CSV</translate>
                        </b-button>

                    </b-form>
                </div>
            </section>
        </div>

        <b-modal id="import_modal" ref="modal" :title="langModalTitle">
            <div>
                <p class="card-text">{{ importResults.message }}</p>

                <b-table-simple striped responsive style="max-height: 300px; overflow-y: scroll;">
                    <b-thead>
                        <b-tr>
                            <b-th class="p-2">
                                <translate key="col_media">Media File</translate>
                            </b-th>
                            <b-th class="p-2">
                                <translate key="col_results">Import Results</translate>
                            </b-th>
                        </b-tr>
                    </b-thead>
                    <b-tbody>
                        <b-tr v-for="row in importResults.import_results" :key="row.id">
                            <b-td class="p-2" style="overflow-x: auto;">
                                <b>{{ row.title }}</b><br>
                                {{ row.artist }}
                            </b-td>
                            <b-td class="p-2" style="overflow-x: auto;">
                                <template v-if="row.success">
                                    <div class="text-success">
                                        <translate key="import_success">Updated successfully.</translate>
                                    </div>
                                </template>
                                <template v-else>
                                    <div class="text-danger">
                                        <translate key="import_failure">Unable to update.</translate>
                                    </div>
                                    <div v-if="row.error">
                                        {{ row.error }}
                                    </div>
                                </template>
                            </b-td>
                        </b-tr>
                    </b-tbody>
                </b-table-simple>
            </div>
            <template #modal-footer>
                <b-button variant="default" type="button" @click="closeModal">
                    <translate key="lang_btn_close">Close</translate>
                </b-button>
            </template>
        </b-modal>
    </div>
</template>

<script>
import FlowUpload from '~/components/Common/FlowUpload';

export default {
    name: 'StationsBulkMedia',
    components: {FlowUpload},
    props: {
        apiUrl: String
    },
    data() {
        return {
            importFile: null,
            importResults: {},
        };
    },
    computed: {
        langModalTitle() {
            return this.$gettext('Import Results');
        }
    },
    methods: {
        doSubmit() {
            let formData = new FormData();
            formData.append('import_file', this.importFile);

            this.$wrapWithLoading(
                this.axios.post(this.apiUrl, formData)
            ).then((resp) => {
                this.importFile = null;
                
                if (resp.data.success) {
                    this.importResults = resp.data;
                    this.$notifySuccess(resp.data.message);
                    this.$refs.modal.show();
                } else {
                    this.$notifyError(resp.data.message);
                    this.close();
                }
            });
        },
        closeModal() {
            this.$refs.modal.hide();
        }
    }
};
</script>
