<template>
    <div class="row row-of-cards">
        <div class="col-md-6">
            <section
                class="card"
                role="region"
                aria-labelledby="hdr_export_media"
            >
                <div class="card-header text-bg-primary">
                    <h2
                        id="hdr_export_media"
                        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="block-buttons">
                        <a
                            class="btn btn-block btn-primary"
                            :href="apiUrl"
                        >
                            {{ $gettext('Export Media to CSV') }}
                        </a>
                    </div>
                </div>
            </section>
        </div>
        <div class="col-md-6">
            <section
                class="card"
                role="region"
            >
                <div class="card-header text-bg-primary">
                    <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>

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

                            <template #default="{id}">
                                <form-file
                                    :id="id"
                                    @uploaded="uploaded"
                                />
                            </template>
                        </form-group>

                        <div class="block-buttons mt-3">
                            <button
                                type="submit"
                                class="btn btn-block btn-primary "
                            >
                                {{ $gettext('Import Changes from CSV') }}
                            </button>
                        </div>
                    </form>
                </div>
            </section>
        </div>

        <modal
            id="import_modal"
            ref="$modal"
            :title="$gettext('Import Results')"
        >
            <p class="card-text">
                {{ importResults.message }}
            </p>

            <div style="max-height: 300px; overflow-y: scroll;">
                <table class="table table-striped table-responsive">
                    <thead>
                        <tr>
                            <th class="p-2">
                                {{ $gettext('Media File') }}
                            </th>
                            <th class="p-2">
                                {{ $gettext('Import Results') }}
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr
                            v-for="row in importResults.import_results"
                            :key="row.id"
                        >
                            <td
                                class="p-2"
                                style="overflow-x: auto;"
                            >
                                <b>{{ row.title }}</b><br>
                                {{ row.artist }}
                            </td>
                            <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>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <template #modal-footer>
                <button
                    class="btn btn-secondary"
                    type="button"
                    @click="hide"
                >
                    {{ $gettext('Close') }}
                </button>
            </template>
        </modal>
    </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {useNotify} from "~/functions/useNotify";
import {useAxios} from "~/vendor/axios";
import Modal from "~/components/Common/Modal.vue";
import FormGroup from "~/components/Form/FormGroup.vue";
import FormFile from "~/components/Form/FormFile.vue";
import {getStationApiUrl} from "~/router";
import {ModalTemplateRef, useHasModal} from "~/functions/useHasModal.ts";

const apiUrl = getStationApiUrl('/files/bulk');

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

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

const $modal = ref<ModalTemplateRef>(null);
const {show, hide} = useHasModal($modal);

const uploaded = (file) => {
    importFile.value = file;
};

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

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

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

            show();
        } else {
            notifyError(resp.data.message);
            hide();
        }
    });
};
</script>
