import React, { useEffect, useState } from 'react';
import { Affix, Alert, Button, Form, Input, Popconfirm, Space, Table, Typography } from 'antd';
const EditableCell = ({ editing, dataIndex, title, record, index, children, ...restProps }) => {
    return (<td {...restProps}>
            {editing ? (<Form.Item name={dataIndex} style={{ margin: 0 }}>
                    <Input />
                </Form.Item>) : (children)}
        </td>);
};
export default function Render(props) {
    const { methods, data } = props;
    const { t, myUpdate, arraysAreEqual } = methods;
    const { i18n, dataArray, oakFullpath, oakEntity } = data;
    const { position, module, namespace, } = i18n || {};
    const [form] = Form.useForm();
    const [rowData, setRowData] = useState(dataArray);
    const [editingKey, setEditingKey] = useState('');
    const [dirty, setDirty] = useState(false);
    useEffect(() => {
        setRowData(dataArray);
    }, [dataArray]);
    useEffect(() => {
        if (arraysAreEqual(rowData, dataArray)) {
            setDirty(false);
        }
        else {
            setDirty(true);
        }
    }, [dataArray, rowData]);
    const isEditing = (record) => record.key === editingKey;
    const edit = (record) => {
        form.setFieldsValue({ ...record });
        setEditingKey(record.key);
    };
    const cancel = () => {
        setEditingKey('');
    };
    const save = async (key) => {
        try {
            const row = (await form.validateFields());
            const newData = [...rowData];
            const index = newData.findIndex((item) => key === item.key);
            if (index > -1) {
                const item = newData[index];
                newData.splice(index, 1, {
                    ...item,
                    ...row,
                });
                setRowData(newData);
                setEditingKey('');
            }
            else {
                newData.push(row);
                setRowData(newData);
                setEditingKey('');
            }
        }
        catch (errInfo) {
            console.log('Validate Failed:', errInfo);
        }
    };
    const columns = [
        {
            title: 'key',
            dataIndex: 'key',
            width: '25%',
            editable: false,
        },
        {
            title: 'value',
            dataIndex: 'value',
            width: '65%',
            editable: true,
        },
        {
            title: t('operation'),
            dataIndex: 'operation',
            render: (_, record) => {
                const editable = isEditing(record);
                return editable ? (<span>
                        <Typography.Link onClick={() => save(record.key)} style={{ marginInlineEnd: 8 }}>
                            {t('save')}
                        </Typography.Link>
                        <Popconfirm title={t("Sure to cancel")} onConfirm={cancel}>
                            <a>{t('common::action.cancel')}</a>
                        </Popconfirm>
                    </span>) : (<Typography.Link disabled={editingKey !== ''} onClick={() => edit(record)}>
                        {t('common::action.editor')}
                    </Typography.Link>);
            },
        },
    ];
    const mergedColumns = columns.map((col) => {
        if (!col.editable) {
            return col;
        }
        return {
            ...col,
            onCell: (record) => ({
                record,
                dataIndex: col.dataIndex,
                title: col.title,
                editing: isEditing(record),
            }),
        };
    });
    return (<>
            <Affix offsetTop={64}>
                <Alert message={<div>
                            <text>
                                您正在更新文件位置为：
                                <Typography.Text keyboard>
                                    {position}
                                </Typography.Text>
                                的国际化
                            </text>
                        </div>} type="info" showIcon action={<Space>
                            <Button disabled={!dirty} type="primary" danger onClick={() => {
                setRowData(dataArray);
            }} style={{
                marginRight: 10,
            }}>
                                {t('common::reset')}
                            </Button>
                            <Button disabled={!dirty} type="primary" onClick={() => myUpdate(rowData)}>
                                {t('common::action.confirm')}
                            </Button>
                        </Space>}/>
            </Affix>
            <div style={{
            marginTop: 12, padding: 12, width: '50%', color: 'var(--oak-text-color-placeholder)',
            borderRadius: 8, border: '1px solid var(--oak-border-color)'
        }}>
                {t('tip')}
            </div>
            <Form form={form} component={false}>
                <Table components={{
            body: { cell: EditableCell },
        }} bordered dataSource={rowData} columns={mergedColumns} pagination={{ onChange: cancel }} style={{ padding: '24px 0px' }}/>
            </Form>
        </>);
}
;