import { Modal } from "../Modal";
import { useRef, useState } from "preact/hooks";
import { useParams } from "wouter";
import axios from "axios";
import { useFlash } from "../App/FlashContext";
import { useGuild } from "../App/useGuild";
import { useQueryClient } from "react-query";

export const Import = () => {
    const [modalOpen, setModalOpen] = useState(false);

    return (
        <>
            <a
                class="show-modal"
                data-modal="chooseTimezoneModal"
                onClick={() => {
                    setModalOpen(true);
                }}
            >
                <span class="icon">
                    <i class="fas fa-exchange"></i>
                </span>{" "}
                Import/Export
            </a>
            {modalOpen && <ImportModal setModalOpen={setModalOpen} />}
        </>
    );
};

const ImportModal = ({ setModalOpen }) => {
    const guild = useGuild();

    const aRef = useRef<HTMLAnchorElement>();
    const inputRef = useRef<HTMLInputElement>();
    const flash = useFlash();

    const [isImporting, setIsImporting] = useState(false);

    const queryClient = useQueryClient();

    return (
        <Modal
            setModalOpen={setModalOpen}
            title={
                <>
                    Import/Export Manager{" "}
                    <a href="/help/iemanager">
                        <span>
                            <i class="fa fa-question-circle"></i>
                        </span>
                    </a>
                </>
            }
        >
            <>
                <div class="control">
                    <div class="field">
                        <label>
                            <input
                                type="radio"
                                class="default-width"
                                name="exportSelect"
                                value="reminders"
                                checked
                            />
                            Reminders
                        </label>
                    </div>
                </div>
                <br />
                <div class="has-text-centered">
                    <div style="color: red">
                        Please first read the <a href="/help/iemanager">support page</a>
                    </div>
                    <button
                        class="button is-success is-outlined"
                        style={{ margin: "2px" }}
                        id="import-data"
                        disabled={isImporting}
                        onClick={() => {
                            inputRef.current.click();
                        }}
                    >
                        Import Data
                    </button>
                    <button
                        class="button is-success"
                        style={{ margin: "2px" }}
                        id="export-data"
                        onClick={() =>
                            axios
                                .get(`/dashboard/api/guild/${guild}/export/reminders`)
                                .then(({ data, status }) => {
                                    if (status === 200) {
                                        aRef.current.href = `data:text/plain;charset=utf-8,${encodeURIComponent(
                                            data.body,
                                        )}`;
                                        aRef.current.click();
                                    } else {
                                        flash({
                                            message: `Unexpected status ${status}`,
                                            type: "error",
                                        });
                                    }
                                })
                        }
                    >
                        Export Data
                    </button>
                </div>
                <a ref={aRef} id="downloader" download="export.csv" class="is-hidden" />
                <input
                    ref={inputRef}
                    id="uploader"
                    type="file"
                    hidden
                    onChange={() => {
                        new Promise((resolve) => {
                            let fileReader = new FileReader();
                            fileReader.onload = (e) => resolve(fileReader.result);
                            fileReader.readAsDataURL(inputRef.current.files[0]);
                        }).then((dataUrl: string) => {
                            setIsImporting(true);

                            axios
                                .put(`/dashboard/api/guild/${guild}/export/reminders`, {
                                    body: dataUrl.split(",")[1],
                                })
                                .then(({ data }) => {
                                    setIsImporting(false);

                                    if (data.error) {
                                        flash({ message: data.error, type: "error" });
                                    } else {
                                        flash({ message: data.message, type: "success" });
                                        queryClient.invalidateQueries({
                                            queryKey: ["GUILD_REMINDERS", guild],
                                        });
                                    }
                                })
                                .then(() => {
                                    delete inputRef.current.files[0];
                                });
                        });
                    }}
                />
            </>
        </Modal>
    );
};