import * as React from "bloatless-react";

import { PATH_COMPONENT_SEPARATOR } from "../../Model/Global/storageModel";
import StorageViewModel from "../../ViewModel/Global/storageViewModel";

import { SplitModal } from "../Components/splitModal";
import { DangerousActionButton } from "../Components/dangerousActionButton";
import { DirectoryItemList } from "../Components/directoryItemList";
import CoreViewModel from "../../ViewModel/Global/coreViewModel";

export function StorageModal(
    coreViewModel: CoreViewModel,
    storageViewModel: StorageViewModel,
) {
    const detailView = React.createProxyState(
        [storageViewModel.selectedPath],
        () => {
            if (storageViewModel.selectedPath.value == PATH_COMPONENT_SEPARATOR)
                return (
                    <div>
                        <span class="secondary">
                            {coreViewModel.translations.storage.noItemSelected}
                        </span>

                        <hr></hr>

                        {DangerousActionButton(
                            coreViewModel,
                            coreViewModel.translations.storage.removeJunkButton,
                            "delete_forever",
                            storageViewModel.removeJunk,
                        )}
                    </div>
                );

            return (
                <div class="flex-column gap">
                    <div class="tile flex-no">
                        <div>
                            <b>{coreViewModel.translations.storage.path}</b>
                            <span
                                class="break-all"
                                subscribe:innerText={
                                    storageViewModel.selectedPath
                                }
                            ></span>
                        </div>
                    </div>
                    <div class="tile flex-no">
                        <div>
                            <b>{coreViewModel.translations.storage.content}</b>
                            <code
                                subscribe:innerText={
                                    storageViewModel.selectedFileContent
                                }
                            ></code>
                        </div>
                    </div>

                    {DangerousActionButton(
                        coreViewModel,
                        coreViewModel.translations.storage.deleteItem,
                        "delete_forever",
                        storageViewModel.deleteSelectedItem,
                    )}
                </div>
            );
        },
    );
    return (
        <div class="modal" toggle:open={storageViewModel.isShowingStorageModal}>
            <div>
                <main class="padding-0">
                    {SplitModal(
                        coreViewModel,
                        new React.State(DirectoryItemList(storageViewModel)),
                        detailView,
                        true,
                    )}
                </main>
                <button on:click={storageViewModel.hideStorageModal}>
                    {coreViewModel.translations.general.closeButton}
                    <span class="icon">close</span>
                </button>
            </div>
        </div>
    );
}