import React from "react"
import { HistoryChanges } from '../types/column.type';
import { DataRow } from "../types/cell.type"
import { DataColumn } from "../types/column.type"
import { TableBodyCellHistory } from "./style"

export interface HistoryProps {
    messages?: {
        noChanges?: string,
        changesHistory?: string,
    },
    row: DataRow,
    column: DataColumn,
    history: (column: DataColumn, row: any) => Promise<HistoryChanges>,
    children?: React.ReactNode | React.ReactNode[] | any,
}

export const History: React.FC<HistoryProps> = ({ messages, row, column, history, children }) => {
    const handleLoadHistory = () => {
        return history(column, row);
    }

    return (
        <>
            {children}
            <TableBodyCellHistory
                className={'datatable-cell-history-button'}
                messages={{
                    noChanges: messages && messages.noChanges
                        ? messages.noChanges
                        : '',
                    changesHistory: messages && messages.changesHistory
                        ? messages.changesHistory
                        : '',
                }}
                getChangeHistory={handleLoadHistory} />
        </>
    )
}