import { t } from "../../services/i18n";
import { formatSize } from "../../services/utils";
import { FormFileUploadButton } from "../react/FormFileUpload";
import { useNoteBlob, useNoteLabel } from "../react/hooks";
import Button from "../react/Button";
import protected_session_holder from "../../services/protected_session_holder";
import { downloadFileNote, openNoteExternally } from "../../services/open";
import toast from "../../services/toast";
import server from "../../services/server";
import FNote from "../../entities/fnote";

export default function FilePropertiesTab({ note }: { note?: FNote | null }) {
    const [ originalFileName ] = useNoteLabel(note, "originalFileName");
    const canAccessProtectedNote = !note?.isProtected || protected_session_holder.isProtectedSessionAvailable();
    const blob = useNoteBlob(note);

    return (
        <div className="file-properties-widget">
            {note && (
                <table className="file-table">
                    <tbody>
                        <tr>
                            <th className="text-nowrap">{t("file_properties.note_id")}:</th>
                            <td className="file-note-id selectable-text">{note.noteId}</td>
                            <th className="text-nowrap">{t("file_properties.original_file_name")}:</th>
                            <td className="file-filename selectable-text">{originalFileName ?? "?"}</td>
                        </tr>
                        <tr>
                            <th className="text-nowrap">{t("file_properties.file_type")}:</th>
                            <td className="file-filetype selectable-text">{note.mime}</td>
                            <th className="text-nowrap">{t("file_properties.file_size")}:</th>
                            <td className="file-filesize selectable-text">{formatSize(blob?.contentLength ?? 0)}</td>
                        </tr>

                        <tr>
                            <td colSpan={4}>
                                <div className="file-buttons">
                                    <Button
                                        icon="bx bx-download"
                                        text={t("file_properties.download")}
                                        primary
                                        disabled={!canAccessProtectedNote}
                                        onClick={() => downloadFileNote(note.noteId)}
                                    />

                                    <Button
                                        icon="bx bx-link-external"
                                        text={t("file_properties.open")}
                                        disabled={note.isProtected}
                                        onClick={() => openNoteExternally(note.noteId, note.mime)}
                                    />

                                    <FormFileUploadButton
                                        icon="bx bx-folder-open"
                                        text={t("file_properties.upload_new_revision")}
                                        disabled={!canAccessProtectedNote}
                                        onChange={(fileToUpload) => {
                                            if (!fileToUpload) {
                                                return;
                                            }

                                            server.upload(`notes/${note.noteId}/file`, fileToUpload[0]).then((result) => {
                                                if (result.uploaded) {
                                                    toast.showMessage(t("file_properties.upload_success"));
                                                } else {
                                                    toast.showError(t("file_properties.upload_failed"));
                                                }
                                            });
                                        }}
                                    />
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            )}
        </div>
    );
}
