import React from "react";
import { useShow } from "@refinedev/core";
import { Show } from "@refinedev/antd";
import { Typography } from "antd";
import { useTranslation } from "react-i18next";
import { DrawioEditor } from "@cundi/refine-xaf";

const { Title } = Typography;

export const DrawioTestShow: React.FC = () => {
    const { t } = useTranslation();
    const { query } = useShow();
    const { data, isLoading } = query;
    const record = data?.data;

    return (
        <Show isLoading={isLoading}>
            <Title level={5}>{t("drawioTest.name")}</Title>
            <p>{record?.Name}</p>

            <Title level={5}>{t("drawioTest.xmlContent")}</Title>
            <DrawioEditor
                value={record?.XmlContent}
                disabled={true}
                height={600}
                autosave={false}
            />
        </Show>
    );
};
