<commit_before>/** @jsx jsx **/
import { jsx, css } from "@emotion/core";

import * as React from "react";
import { useL10n } from "../../react_components/l10nHooks";
import BloomButton from "../../react_components/bloomButton";
import { BloomApi } from "../../utils/bloomApi";
import {
    BloomDialog,
    DialogMiddle,
    DialogBottomButtons,
    DialogBottomLeftButtons,
    DialogTitle,
    useSetupBloomDialog,
    IBloomDialogEnvironmentParams
} from "../../react_components/BloomDialog/BloomDialog";
import {
    DialogCancelButton,
    DialogFolderChooser,
    WarningBox
} from "../../react_components/BloomDialog/commonDialogComponents";
import { WireUpForWinforms } from "../../utils/WireUpWinform";

import { kVerticalSpacingBetweenDialogSections } from "../../bloomMaterialUITheme";
import { ExperimentalBadge } from "../../react_components/experimentalBadge";
import { Div, P } from "../../react_components/l10nComponents";

export const SpreadsheetExportDialog: React.FunctionComponent<{
    dialogEnvironment?: IBloomDialogEnvironmentParams;
    folderPath: string;
}> = props => {
    var title = useL10n(
        "Export to Spreadsheet...",
        "CollectionTab.BookMenu.ExportToSpreadsheet" // same as the menu
    );
    var chooseFolderDescription = useL10n(
        "Target folder for the spreadsheet and images:",
        "Spreadsheet.ExportDialog.folderLabel"
    );

    const { closeDialog, propsForBloomDialog } = useSetupBloomDialog(
        props.dialogEnvironment
    );

    const [folderPath, setFolderPath] = React.useState(props.folderPath);

    return (
        <BloomDialog {...propsForBloomDialog}>
            <DialogTitle title={title}>
                <ExperimentalBadge />
            </DialogTitle>
            <DialogMiddle
                css={css`
                    // our geckofx60 doesn't support this. So there is a <p></p> below instead
                    // gap: ${kVerticalSpacingBetweenDialogSections};
                `}
            >
                <Div l10nKey="Spreadsheet.ExportDialog.Description">
                    Bloom will create a spreadsheet containing the text and
                    images of this book. You can then make changes, like making
                    new translations. Finally, use the “Import &amp; Update from
                    Spreadsheet...” command to bring your changes back in.
                </Div>
                <p></p>
                <WarningBox>
                    <span>
                        This feature is still a work in progress. Though you can{" "}
                        <em>export</em> all books, Bloom cannot
                        <em>import</em> books with these features: TalkingBooks,
                        Quizzes and other Activities. There may be other export
                        and import limitations we are not aware of.
                    </span>
                </WarningBox>
                <p></p>
                <div>{chooseFolderDescription}</div>

                <DialogFolderChooser
                    path={folderPath}
                    setPath={setFolderPath}
                    description={chooseFolderDescription}
                />
            </DialogMiddle>
            <DialogBottomButtons>
                <DialogBottomLeftButtons>
                    {/* Currently we don't really have any help for this.
<commit_msg>Keep space before an <em><commit_after>/** @jsx jsx **/
import { jsx, css } from "@emotion/core";

import * as React from "react";
import { useL10n } from "../../react_components/l10nHooks";
import BloomButton from "../../react_components/bloomButton";
import { BloomApi } from "../../utils/bloomApi";
import {
    BloomDialog,
    DialogMiddle,
    DialogBottomButtons,
    DialogBottomLeftButtons,
    DialogTitle,
    useSetupBloomDialog,
    IBloomDialogEnvironmentParams
} from "../../react_components/BloomDialog/BloomDialog";
import {
    DialogCancelButton,
    DialogFolderChooser,
    WarningBox
} from "../../react_components/BloomDialog/commonDialogComponents";
import { WireUpForWinforms } from "../../utils/WireUpWinform";

import { kVerticalSpacingBetweenDialogSections } from "../../bloomMaterialUITheme";
import { ExperimentalBadge } from "../../react_components/experimentalBadge";
import { Div, P } from "../../react_components/l10nComponents";

export const SpreadsheetExportDialog: React.FunctionComponent<{
    dialogEnvironment?: IBloomDialogEnvironmentParams;
    folderPath: string;
}> = props => {
    var title = useL10n(
        "Export to Spreadsheet...",
        "CollectionTab.BookMenu.ExportToSpreadsheet" // same as the menu
    );
    var chooseFolderDescription = useL10n(
        "Target folder for the spreadsheet and images:",
        "Spreadsheet.ExportDialog.folderLabel"
    );

    const { closeDialog, propsForBloomDialog } = useSetupBloomDialog(
        props.dialogEnvironment
    );

    const [folderPath, setFolderPath] = React.useState(props.folderPath);

    return (
        <BloomDialog {...propsForBloomDialog}>
            <DialogTitle title={title}>
                <ExperimentalBadge />
            </DialogTitle>
            <DialogMiddle
                css={css`
                    // our geckofx60 doesn't support this. So there is a <p></p> below instead
                    // gap: ${kVerticalSpacingBetweenDialogSections};
                `}
            >
                <Div l10nKey="Spreadsheet.ExportDialog.Description">
                    Bloom will create a spreadsheet containing the text and
                    images of this book. You can then make changes, like making
                    new translations. Finally, use the “Import &amp; Update from
                    Spreadsheet...” command to bring your changes back in.
                </Div>
                <p></p>
                <WarningBox>
                    <span>
                        This feature is still a work in progress. Though you can{" "}
                        <em>export</em> all books, Bloom cannot <em>import</em>{" "}
                        books with these features: TalkingBooks, Quizzes and
                        other Activities. There may be other export and import
                        limitations we are not aware of.
                    </span>
                </WarningBox>
                <p></p>
                <div>{chooseFolderDescription}</div>

                <DialogFolderChooser
                    path={folderPath}
                    setPath={setFolderPath}
                    description={chooseFolderDescription}
                />
            </DialogMiddle>
            <DialogBottomButtons>
                <DialogBottomLeftButtons>
                    {/* Currently we don't really have any help for this.

{'fraction_non_alphanumeric': 0.09912966514235137, 'fraction_numerical': 0.0041304027142646405, 'mean_word_length': 1.927461139896373, 'pattern_counts': {'":': 0, '<': 60, '<?xml version=': 0, '>': 62, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6818243', 'n_tokens_mistral': 1745, 'n_tokens_neox': 1647, 'n_words': 452}