/*
Copyright 2021 The Matrix.org Foundation C.I.C.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

import React, { useRef, useState } from "react";
import { Room } from "matrix-js-sdk/src";
import { _t } from "../../../languageHandler";
import { IDialogProps } from "./IDialogProps";
import BaseDialog from "./BaseDialog";
import DialogButtons from "../elements/DialogButtons";
import Field from "../elements/Field";
import StyledRadioGroup from "../elements/StyledRadioGroup";
import StyledCheckbox from "../elements/StyledCheckbox";
import {
    ExportFormat,
    ExportType,
    textForFormat,
    textForType,
} from "../../../utils/exportUtils/exportUtils";
import withValidation, { IFieldState, IValidationResult } from "../elements/Validation";
import HTMLExporter from "../../../utils/exportUtils/HtmlExport";
import JSONExporter from "../../../utils/exportUtils/JSONExport";
import PlainTextExporter from "../../../utils/exportUtils/PlainTextExport";
import { useStateCallback } from "../../../hooks/useStateCallback";
import Exporter from "../../../utils/exportUtils/Exporter";
import Spinner from "../elements/Spinner";
import Modal from "../../../Modal";
import InfoDialog from "./InfoDialog";

interface IProps extends IDialogProps {
    room: Room;
}

const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
    const [exportFormat, setExportFormat] = useState(ExportFormat.Html);
    const [exportType, setExportType] = useState(ExportType.Timeline);
    const [includeAttachments, setAttachments] = useState(false);
    const [isExporting, setExporting] = useState(false);
    const [numberOfMessages, setNumberOfMessages] = useState<number>(100);
    const [sizeLimit, setSizeLimit] = useState<number | null>(8);
    const sizeLimitRef = useRef<Field>();
    const messageCountRef = useRef<Field>();
    const exportProgressRef = useRef<HTMLParagraphElement>();
    const [displayCancel, setCancelWarning] = useState(false);
    const [exportCancelled, setExportCancelled] = useState(false);
    const [exportSuccessful, setExportSuccessful] = useState(false);
    const [exporter, setExporter] = useStateCallback<Exporter>(
        null,
        async (exporter: Exporter) => {
            await exporter?.export().then(() => {
                if (!exportCancelled) setExportSuccessful(true);
            });
        },
    );

    const startExport = async () => {
        const exportOptions = {
            numberOfMessages,
            attachmentsIncluded: includeAttachments,
            maxSize: sizeLimit * 1024 * 1024,
        };
        switch (exportFormat) {
            case ExportFormat.Html:
                setExporter(
                    new HTMLExporter(
                        room,
                        ExportType[exportType],
                        exportOptions,
                        exportProgressRef,
                    ),
                );
                break;
            case ExportFormat.Json:
                setExporter(
                    new JSONExporter(
                        room,
                        ExportType[exportType],
                        exportOptions,
                        exportProgressRef,
                    ),
                );
                break;
            case ExportFormat.PlainText:
                setExporter(
                    new PlainTextExporter(
                        room,
                        ExportType[exportType],
                        exportOptions,
                        exportProgressRef,
                    ),
                );
                break;
            default:
                console.error("Unknown export format");
                return;
        }
    };

    const onExportClick = async () => {
        const isValidSize = await sizeLimitRef.current.validate({
            focused: false,
        });
        if (!isValidSize) {
            sizeLimitRef.current.validate({ focused: true });
            return;
        }
        if (exportType === ExportType.LastNMessages) {
            const isValidNumberOfMessages =
                await messageCountRef.current.validate({ focused: false });
            if (!isValidNumberOfMessages) {
                messageCountRef.current.validate({ focused: true });
                return;
            }
        }
        setExporting(true);
        await startExport();
    };

    const validateSize = withValidation({
        rules: [
            {
                key: "required",
                test({ value, allowEmpty }) {
                    return allowEmpty || !!value;
                },
                invalid: () => {
                    const min = 1;
                    const max = 10 ** 8;
                    return _t("Enter a number between %(min)s and %(max)s", {
                        min,
                        max,
                    });
                },
            }, {
                key: "number",
                test: ({ value }) => {
                    const parsedSize = parseFloat(value);
                    const min = 1;
                    const max = 2000;
                    return !(isNaN(parsedSize) || min > parsedSize || parsedSize > max);
                },
                invalid: () => {
                    const min = 1;
                    const max = 2000;
                    return _t(
                        "Size can only be a number between %(min)s MB and %(max)s MB",
                        { min, max },
                    );
                },
            },
        ],
    });

    const onValidateSize = async (fieldState: IFieldState): Promise<IValidationResult> => {
        const result = await validateSize(fieldState);
        return result;
    };

    const validateNumberOfMessages = withValidation({
        rules: [
            {
                key: "required",
                test({ value, allowEmpty }) {
                    return allowEmpty || !!value;
                },
                invalid: () => {
                    const min = 1;
                    const max = 10 ** 8;
                    return _t("Enter a number between %(min)s and %(max)s", {
                        min,
                        max,
                    });
                },
            }, {
                key: "number",
                test: ({ value }) => {
                    const parsedSize = parseFloat(value);
                    const min = 1;
                    const max = 10 ** 8;
                    if (isNaN(parsedSize)) return false;
                    return !(min > parsedSize || parsedSize > max);
                },
                invalid: () => {
                    const min = 1;
                    const max = 10 ** 8;
                    return _t(
                        "Number of messages can only be a number between %(min)s and %(max)s",
                        { min, max },
                    );
                },
            },
        ],
    });

    const onValidateNumberOfMessages = async (fieldState: IFieldState): Promise<IValidationResult> => {
        const result = await validateNumberOfMessages(fieldState);
        return result;
    };

    const onCancel = async () => {
        if (isExporting) setCancelWarning(true);
        else onFinished(false);
    };

    const confirmCanel = async () => {
        await exporter?.cancelExport().then(() => {
            setExportCancelled(true);
            setExporting(false);
            setExporter(null);
        });
    };

    const exportFormatOptions = Object.keys(ExportFormat).map((format) => ({
        value: ExportFormat[format],
        label: textForFormat(ExportFormat[format]),
    }));

    const exportTypeOptions = Object.keys(ExportType).map((type) => {
        return (
            <option key={type} value={ExportType[type]}>
                { textForType(ExportType[type]) }
            </option>
        );
    });

    let messageCount = null;
    if (exportType === ExportType.LastNMessages) {
        messageCount = (
            <Field
                element="input"
                type="number"
                value={numberOfMessages.toString()}
                ref={messageCountRef}
                onValidate={onValidateNumberOfMessages}
                label={_t("Number of messages")}
                onChange={(e) => {
                    setNumberOfMessages(parseInt(e.target.value));
                }}
            />
        );
    }

    const sizePostFix = <span>{ _t("MB") }</span>;

    if (exportCancelled) {
        // Display successful cancellation message
        Modal.createTrackedDialog("Export Cancelled", "", InfoDialog, {
            title: _t("Export Cancelled"),
            description: <p>{ _t("The export was cancelled successfully") }</p>,
            hasCloseButton: true,
        });
        return null;
    } else if (exportSuccessful) {
        // Display successful export message
        Modal.createTrackedDialog("Export Successful", "", InfoDialog, {
            title: _t("Export Successful"),
            description: <p>{ _t("Your messages were successfully exported") }</p>,
            hasCloseButton: true,
        });
        return null;
    } else if (displayCancel) {
        // Display cancel warning
        return (
            <BaseDialog
                title={_t("Warning")}
                className="mx_ExportDialog"
                contentId="mx_Dialog_content"
                onFinished={onFinished}
                fixedWidth={true}
            >
                <p>
                    { _t(
                        "Are you sure you want to stop exporting your data? If you do, you'll need to start over.",
                    ) }
                </p>
                <DialogButtons
                    primaryButton={_t("Stop")}
                    primaryButtonClass="danger"
                    hasCancel={true}
                    cancelButton={_t("Continue")}
                    onCancel={() => setCancelWarning(false)}
                    onPrimaryButtonClick={confirmCanel}
                />
            </BaseDialog>
        );
    } else {
        // Display export settings
        return (
            <BaseDialog
                title={isExporting ? _t("Exporting your data") : _t("Export Chat")}
                className={`mx_ExportDialog ${isExporting && "mx_ExportDialog_Exporting"}`}
                contentId="mx_Dialog_content"
                hasCancel={true}
                onFinished={onFinished}
                fixedWidth={true}
            >
                { !isExporting ? <p>
                    { _t(
                        "Select from the options below to export chats from your timeline",
                    ) }
                </p> : null }

                <span className="mx_ExportDialog_subheading">
                    { _t("Format") }
                </span>

                <div className="mx_ExportDialog_options">
                    <StyledRadioGroup
                        name="exportFormat"
                        value={exportFormat}
                        onChange={(key) => setExportFormat(ExportFormat[key])}
                        definitions={exportFormatOptions}
                    />

                    <span className="mx_ExportDialog_subheading">
                        { _t("Messages") }
                    </span>

                    <Field
                        element="select"
                        value={exportType}
                        onChange={(e) => {
                            setExportType(ExportType[e.target.value]);
                        }}
                    >
                        { exportTypeOptions }
                    </Field>
                    { messageCount }

                    <span className="mx_ExportDialog_subheading">
                        { _t("Size Limit") }
                    </span>

                    <Field
                        type="number"
                        autoComplete="off"
                        onValidate={onValidateSize}
                        element="input"
                        ref={sizeLimitRef}
                        value={sizeLimit.toString()}
                        postfixComponent={sizePostFix}
                        onChange={(e) => setSizeLimit(parseInt(e.target.value))}
                    />

                    <StyledCheckbox
                        checked={includeAttachments}
                        onChange={(e) =>
                            setAttachments(
                                (e.target as HTMLInputElement).checked,
                            )
                        }
                    >
                        { _t("Include Attachments") }
                    </StyledCheckbox>
                </div>
                { isExporting ? (
                    <div className="mx_ExportDialog_progress">
                        <Spinner w={24} h={24} />
                        <p ref={exportProgressRef}>
                            { _t("Processing...") }
                        </p>
                        <DialogButtons
                            primaryButton={_t("Cancel")}
                            primaryButtonClass="danger"
                            hasCancel={false}
                            onPrimaryButtonClick={onCancel}
                        />
                    </div>
                ) : (
                    <DialogButtons
                        primaryButton={_t("Export")}
                        onPrimaryButtonClick={onExportClick}
                        onCancel={() => onFinished(false)}
                    />
                ) }
            </BaseDialog>
        );
    }
};

export default ExportDialog;