/* eslint-disable spire/export-styles */
import PageProps from "@insite/client-framework/Types/PageProps";
import WidgetModule from "@insite/client-framework/Types/WidgetModule";
import WidgetProps from "@insite/client-framework/Types/WidgetProps";
import Typography from "@insite/mobius/Typography";
import React, { FC } from "react";

const defaultManifest = "{}";

const enum fields {
    contentField = "contentField",
}

interface Props extends PageProps, WidgetProps {
    contentField: {
        [fields.contentField]: string;
    };
}

const ManifestJsonContent: FC<Props> = props => {
    return <Typography style={{ whiteSpace: "pre-wrap" }}>{props.fields[fields.contentField]}</Typography>;
};

const widgetModule: WidgetModule = {
    component: ManifestJsonContent,
    definition: {
        group: "Manifest JSON",
        displayName: "Content",
        allowedContexts: ["ManifestJsonPage"],
        fieldDefinitions: [
            {
                name: "contentField",
                displayName: "Content",
                editorTemplate: "CodeField",
                defaultValue: defaultManifest,
                fieldType: "General",
                isRequired: true,
                options: {
                    mode: "application/json",
                    lint: true,
                    autoRefresh: true,
                },
            },
        ],
    },
};

export default widgetModule;
