import React from "react";
import { BaseRecord } from "@refinedev/core";
import { EditButton, ShowButton, DeleteButton } from "@refinedev/antd";
import { Table, Space } from "antd";
import { SmartList } from "@cundi/refine-xaf";
import { useTranslation } from "react-i18next";

export const TiptapTestList: React.FC = () => {
    const { t } = useTranslation();

    return (
        <SmartList
            resource="TiptapTest"
            searchFields={["Name"]}
        >
            <Table.Column
                dataIndex="Name"
                title={t("tiptapTest.name")}
                sorter
                // @ts-ignore
                defaultVisible
            />
            <Table.Column
                dataIndex="Content"
                title={t("tiptapTest.content")}
                render={(value: string) => (
                    <div
                        style={{ maxWidth: 300 }}
                        dangerouslySetInnerHTML={{
                            __html: value?.length > 100 ? `${value.substring(0, 100)}...` : value || "",
                        }}
                    />
                )}
                // @ts-ignore
                defaultVisible
            />
            <Table.Column
                title={t("buttons.list")}
                dataIndex="actions"
                render={(_, record: BaseRecord) => (
                    <Space>
                        <EditButton hideText size="small" recordItemId={record.Oid} />
                        <ShowButton hideText size="small" recordItemId={record.Oid} />
                        <DeleteButton hideText size="small" recordItemId={record.Oid} />
                    </Space>
                )}
            />
        </SmartList>
    );
};
