<template>
    <div class="row row-of-cards">
        <div class="col-md-6">
            <section
                class="card"
                role="region"
            >
                <div class="card-header bg-primary-dark">
                    <h2 class="card-title">
                        {{ $gettext('Export Media to CSV') }}
                    </h2>
                </div>

                <div class="card-body">
                    <p class="card-text">
                        {{
                            $gettext('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.')
                        }}
                    </p>
                    <p class="card-text">
                        {{
                            $gettext('Note: If your media metadata has UTF-8 characters, you should use a spreadsheet editor that supports UTF-8 encoding, like OpenOffice.')
                        }}
                    </p>

                    <div class="buttons">
                        <b-button
                            variant="primary"
                            size="lg"
                            block
                            :href="apiUrl"
                        >
                            {{ $gettext('Export Media to CSV') }}
                        </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">
                        {{ $gettext('Import Changes from CSV') }}
                    </h2>
                </div>

                <div class="card-body">
                    <p class="card-text">
                        {{
                            $gettext('The format and headers of this CSV should match the format generated by the export function on this page.')
                        }}
                    </p>

                    <b-form
                        class="form"
                        @submit.prevent="doSubmit"
                    >
                        <b-form-group label-for="import_file">
                            <template #label>
                                {{ $gettext('Select CSV File') }}
                            </template>
                            <b-form-file
                                id="import_modal_playlist_file"
                                v-model="importFile"
                            />
                        </b-form-group>

                        <b-button
                            type="submit"
                            size="lg"
                            block
                            variant="primary"
                            class="mt-2"
                        >
                            {{ $gettext('Import Changes from CSV') }}
                        </b-button>
                    </b-form>
                </div>
            </section>
        </div>

        <b-modal
            id="import_modal"
            ref="$modal"
            :title="$gettext('Import Results')"
        >
            <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">
                                {{ $gettext('Media File') }}
                            </b-th>
                            <b-th class="p-2">
                                {{ $gettext('Import Results') }}
                            </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">
                                        {{ $gettext('Updated successfully.') }}
                                    </div>
                                </template>
                                <template v-else>
                                    <div class="text-danger">
                                        {{ $gettext('Unable to update.') }}
                                    </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"
                >
                    {{ $gettext('Close') }}
                </b-button>
            </template>
        </b-modal>
    </div>
</template>

<script setup>
import {ref} from "vue";
import {useNotify} from "~/vendor/bootstrapVue";
import {useAxios} from "~/vendor/axios";

const props = defineProps({
    apiUrl: {
        type: String,
        required: true
    }
});

const importFile = ref(null);
const importResults = ref(null);

const {wrapWithLoading, notifySuccess, notifyError} = useNotify();
const {axios} = useAxios();

const $modal = ref(); // Template Ref

const close = () => {
    $modal.value.hide();
};

const doSubmit = () => {
    let formData = new FormData();
    formData.append('import_file', importFile.value);

    wrapWithLoading(
        axios.post(props.apiUrl, formData)
    ).then((resp) => {
        importFile.value = null;

        if (resp.data.success) {
            importResults.value = resp.data;
            notifySuccess(resp.data.message);

            $modal.value.show();
        } else {
            notifyError(resp.data.message);

            close();
        }
    });
};
</script>
