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

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

    return (
        <SmartList
            resource="Article"
            searchFields={["Title", "Content"]}
        >
            <Table.Column
                dataIndex="Title"
                title={t("article.title")}
                sorter
                // @ts-ignore
                defaultVisible
            />
            <Table.Column
                dataIndex="Content"
                title={t("article.content")}
                render={(value: string) => (
                    <span style={{ fontSize: '0.9em' }}>
                        {value?.length > 50 ? `${value.substring(0, 50)}...` : value}
                    </span>
                )}
                // @ts-ignore
                defaultVisible
            />
            <Table.Column
                title={t("buttons.list")}
                dataIndex="actions"
                render={(_, record: BaseRecord) => (
                    <Space>
                        <EditButton hideText size="small" recordItemId={record.Oid} />
                        <DeleteButton hideText size="small" recordItemId={record.Oid} />
                    </Space>
                )}
            />
        </SmartList>
    );
};