import React, { useState } from 'react';
import { Input, Switch, Form, Button, Select, Flex, AutoComplete, } from 'antd';
import Styles from './web.pc.module.less';
export default function render(props) {
    const { path, isCreate, entities, recursivable, legalSourceEntity, oakExecutable, destEntityFixed } = props.data;
    const { t, updateDestEntity, selectPath, resetPath, clearDestEntity, update, confirm } = props.methods;
    if (path && entities) {
        const [options, setOptions] = useState(entities.map(ele => ({ value: ele })));
        const { pathChoice, pathChosen } = props.data;
        const currentPath = pathChosen.map(ele => ele.path).join('.');
        return (<>
                <Form labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} layout="horizontal" style={{ width: '100%' }} colon={false}>
                    <Form.Item label={t('path:attr.destEntity')}>
                        {isCreate && !destEntityFixed ? <AutoComplete options={options} disabled={!isCreate} onSelect={(value) => {
                    updateDestEntity(value);
                    setOptions(entities.map(ele => ({ value: ele })));
                }} onSearch={(value) => setOptions(entities.filter(ele => ele.startsWith(value)).map(ele => ({ value: ele })))} onChange={(value) => {
                    if (!entities.includes(value)) {
                        clearDestEntity();
                    }
                }}/> : <Input disabled={true} value={path.destEntity}/>}
                    </Form.Item>
                    {path.destEntity && <Form.Item label={t('path:attr.value')}>
                            {isCreate ? (<Flex style={{ width: '100%' }} vertical align="stretch" gap="middle">
                                        <Flex justify="flex-start" align="center" gap="small">
                                            <Select style={{ width: 260 }} options={pathChoice.map(ele => ({
                        label: ele.path,
                        value: ele.path
                    }))} onSelect={(value) => selectPath(value)} value={t('tips.value')}/>
                                            <Button size="small" onClick={resetPath}>
                                                {t('common::reset')}
                                            </Button>
                                        </Flex>
                                        <Input.TextArea rows={3} style={{ flex: 1 }} disabled value={currentPath}/>
                                    </Flex>) : <Input value={path.value} disabled={true}/>}
                        </Form.Item>}
                    {path.destEntity && <Form.Item label={t('path:attr.sourceEntity')} help={!legalSourceEntity && <span className={Styles.warning}>{t('tips.sourceEntity')}</span>}>
                            <Input disabled value={path.sourceEntity}/>
                        </Form.Item>}
                    {legalSourceEntity && <Form.Item label={t('path:attr.recursive')} help={!recursivable && <span className={Styles.warning}>{t('tips.recursive')}</span>}>
                            <Switch checked={!!path.recursive} onChange={(checked) => {
                    update({
                        recursive: checked,
                    });
                }} disabled={!recursivable}/>
                        </Form.Item>}
                    {legalSourceEntity && <Form.Item label={t('path:attr.desc')}>
                            <Input.TextArea rows={3} placeholder={t('tips.desc')} value={path.desc || undefined} onChange={({ currentTarget }) => {
                    const { value } = currentTarget;
                    update({
                        desc: value || null,
                    });
                }}/>
                        </Form.Item>}
                </Form>
                <Flex justify="end" style={{ padding: 10 }}>
                    <Button type="primary" onClick={() => confirm()} disabled={!legalSourceEntity || oakExecutable !== true}>
                        {t('common::action.confirm')}
                    </Button>
                </Flex>
            </>);
    }
}