import React, { useState } from 'react';
import { Button, Modal, Alert } from 'antd';
import { PlusCircleOutlined } from '@ant-design/icons';
import Styles from './web.pc.module.less';
import Upsert from '../upsert';
import { OakAttrNotNullException, OakException } from 'oak-domain/lib/types';
import { generateNewIdAsync } from 'oak-domain/lib/utils/uuid';
function WpProduct(props) {
    return null;
}
export default function render(props) {
    const { wpAccountId, wpProducts, oakFullpath, oakExecutable, canCreate, systemId } = props.data;
    const { t, addItem, execute, clean } = props.methods;
    const getNotNullMessage = (entity, attr) => {
        return t('notnull', { value: t(`${entity}:attr.${attr}`) });
    };
    const errMsg = oakExecutable instanceof OakException && (oakExecutable instanceof OakAttrNotNullException ? getNotNullMessage(oakExecutable.getEntity(), oakExecutable.getAttributes()[0]) : t(oakExecutable.message));
    const [upsertId, setUpsertId] = useState('');
    const U = (<Modal width={420} destroyOnClose title={`${t('wpProduct:name')}${t('common::action.update')}`} open={!!upsertId} onCancel={() => {
            clean();
            setUpsertId('');
        }} closeIcon={null} onOk={async () => {
            await execute();
            setUpsertId('');
        }} okButtonProps={{
            disabled: oakExecutable !== true,
        }} okText={t('common::confirm')} cancelText={(t('common::action.cancel'))}>
            <div style={{ padding: 10 }}>
                {errMsg && <Alert type="error" message={errMsg} style={{ marginBottom: 20 }}/>}
                <Upsert oakPath={`${oakFullpath}.${upsertId}`} systemId={systemId} wpAccountId={wpAccountId}/>
            </div>
        </Modal>);
    if (wpProducts && wpProducts.length) {
        return (<div className={Styles.container}>
                <Alert type='info' message={t('tips')}/>
                {U}
                <div className={Styles.list}>
                    {wpProducts.filter(ele => ele.$$createAt$$ > 1).map((ele, idx) => <div className={Styles.item} key={idx}>
                                <WpProduct wpProduct={ele} t={t} onRemove={() => {
                    Modal.confirm({
                        title: t('confirmDelete'),
                        content: t('areYouSure'),
                        onOk: async () => execute(undefined, undefined, undefined, [
                            {
                                entity: 'wpProduct',
                                operation: {
                                    id: await generateNewIdAsync(),
                                    action: 'remove',
                                    data: {},
                                    filter: {
                                        id: ele.id,
                                    },
                                }
                            }
                        ]),
                    });
                }} onUpdate={() => setUpsertId(ele.id)}/>
                            </div>)}
                </div>
                <div className={Styles.btnBar}>
                    {canCreate && <Button type="primary" onClick={() => {
                    const id = addItem({});
                    setUpsertId(id);
                }}>
                        {t('common::action.add')}
                    </Button>}
                </div>
            </div>);
    }
    return (<div className={Styles.container2}>
            {U}
            <div className={Styles.body}>
                {canCreate ? <PlusCircleOutlined className={Styles.add} shape="circle" style={{ fontSize: 50 }} onClick={() => {
                const id = addItem({});
                setUpsertId(id);
            }}/> : t('noData')}
            </div>
        </div>);
}