import { Table, Button, Form, Space } from 'antd';
import { PlusCircleOutlined, EditOutlined, MinusCircleOutlined } from "@ant-design/icons";
import React from 'react';
import './table-form.css'

export interface ITableFormProps {
    dataSource: any[],
    add: () => void;
    remove: () => void;
    columns: any;
    hideAdd?: boolean;
}
export const TableForm = (props) => {
    const { dataSource, add, remove, columns, hideAdd } = props;
    if (!hideAdd) {
        columns.push({
            title: "Action",
            dataIndex: 'action',
            render: (value, row, index) => {
                return (
                    <span>
                        <MinusCircleOutlined style={{ color: 'red' }} onClick={() => { remove(row.name) }} />
                    </span>
                );
            }
        });
    }
    return (
        <Table
            columns={columns}
            dataSource={dataSource}
            pagination={false}
            footer={() => <Space style={{ width: '100%', display: 'flex', justifyContent: 'flex-end' }}>
                {!hideAdd && <Button onClick={() => add()} type='primary'>
                    <PlusCircleOutlined /> add
                </Button>}
            </Space>}
        ></Table>
    )
}

export default TableForm;