import React from 'react';
import { Form, Input, Button, Divider } from 'antd';
import ListPro from '../../listPro';
export default function Render(props) {
    const { methods, data } = props;
    const { t, updateSearchValue, onSearch, clearSearch } = methods;
    const { searchValue, rows, oakFullpath, oakEntity } = data;
    const attributes = [
        'module',
        'position',
        'namespace',
    ];
    return (<>
            <Form name="form" style={{ padding: 16, width: '65%', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <Form.Item label={t('i18n:attr.position')} name="position" style={{ flex: 1 }}>
                    <Input allowClear placeholder={t('placeholder.position')} onChange={(e) => {
            const value = e.target.value;
            if (value && value !== '') {
                updateSearchValue(e.target.value);
            }
            else {
                clearSearch();
            }
        }} value={searchValue} onPressEnter={(e) => {
            onSearch();
        }}/>
                </Form.Item>
                <Form.Item style={{ marginLeft: 32 }}>
                    <Button type='primary' onClick={() => {
            onSearch();
        }}>
                        {t('common::select')}
                    </Button>
                </Form.Item>
            </Form>
            <Divider />
            {(rows && rows?.length > 0) ? (<ListPro disableSerialNumber={true} entity={oakEntity} data={rows} attributes={attributes} extraActions={(row) => [
                {
                    action: 'update',
                    label: t('change'),
                    show: true,
                }
            ]} onAction={async (row, action) => {
                switch (action) {
                    case 'update':
                        methods.navigateTo({
                            url: '/i18n/upsert',
                            oakId: row.id,
                        });
                        break;
                }
            }} oakPath={oakFullpath}/>) : (<div>
                    {(searchValue && searchValue !== '') ? (<div>{t('check')}</div>) : (<div>{t('noData')}</div>)}
                </div>)}
        </>);
}
;