import React, { useState } from 'react';
import { Button, Modal, Alert, Descriptions, Tabs } from 'antd';
import { PlusCircleOutlined } from '@ant-design/icons';
import Styles from './web.pc.module.less';
import Upsert from '../upsert';
import WpProductConfig from '../../wpProduct/config';
import { OakAttrNotNullException, OakException } from 'oak-domain/lib/types';
import { generateNewIdAsync } from 'oak-domain/lib/utils/uuid';
import { ToYuan } from 'oak-domain/lib/utils/money';
export function WpAccount(props) {
    const { data: account, t, onUpdate, onRemove, systemId } = props;
    const { refundGapDays, mchId, enabled, price, taxLossRatio, refundCompensateRatio, allowWithdrawTransfer, withdrawTransferLossRatio, needReceiving } = account;
    const [activeKey, setActiveKey] = useState("1");
    const D = (<Descriptions column={1} bordered title={t('wpAccount:name')} size="small">
            <Descriptions.Item label={t('wpAccount:attr.mchId')}>{mchId}</Descriptions.Item>
            <Descriptions.Item label={t('wpAccount:attr.price')}>{ToYuan(price)}{t('common::pay.scale')}</Descriptions.Item>
            <Descriptions.Item label={t('wpAccount:attr.taxLossRatio')}>{taxLossRatio}%</Descriptions.Item>
            <Descriptions.Item label={t('wpAccount:attr.refundCompensateRatio')}>{refundCompensateRatio}%</Descriptions.Item>
            <Descriptions.Item label={t('wpAccount:attr.refundGapDays')}>{refundGapDays}</Descriptions.Item>
            <Descriptions.Item label={t('wpAccount:attr.allowWithdrawTransfer')}>{t(`common::${!!allowWithdrawTransfer}`)}</Descriptions.Item>
            <Descriptions.Item label={t('wpAccount:attr.withdrawTransferLossRatio')}>{withdrawTransferLossRatio}%</Descriptions.Item>
            <Descriptions.Item label={t('wpAccount:attr.enabled')}>{t(`common::${enabled}`)}</Descriptions.Item>
        </Descriptions>);
    if (onUpdate) {
        return (<Tabs activeKey={activeKey} onTabClick={(activeKey) => {
                setActiveKey(activeKey);
            }} tabBarExtraContent={activeKey === "1" && <>
                        {onUpdate && <Button style={{ marginRight: 4 }} size="small" onClick={() => onUpdate()}>
                            {t('common::action.update')}
                        </Button>}
                        {onRemove && <Button danger size="small" onClick={() => onRemove()}>
                            {t('common::action.remove')}
                        </Button>}
                    </>} style={{ width: 380, height: 520 }} items={[
                {
                    key: '1',
                    label: t('common::action.detail'),
                    children: D,
                },
                {
                    key: '2',
                    label: t('wpProduct:name'),
                    children: (<WpProductConfig oakPath={`$$wpProduct-${account.id}`} systemId={systemId} wpAccountId={account.id}/>)
                }
            ]}/>);
    }
    return D;
}
export default function render(props) {
    const { accounts, 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={920} destroyOnClose title={`${t('wpAccount:name')}${t('common::action.add')}`} 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}/>
            </div>
        </Modal>);
    if (accounts && accounts?.length) {
        return (<div className={Styles.container}>
                {U}
                <div className={Styles.list}>
                    {accounts.filter(ele => ele.$$createAt$$ > 1).map((ele, idx) => <div className={Styles.item} key={idx}>
                                <WpAccount systemId={systemId} data={ele} t={t} onRemove={ele['#oakLegalActions']?.includes('remove') ? () => {
                    Modal.confirm({
                        title: t('confirmDelete'),
                        content: t('areYouSure'),
                        onOk: async () => execute(undefined, undefined, undefined, [
                            {
                                entity: 'wpAccount',
                                operation: {
                                    id: await generateNewIdAsync(),
                                    action: 'remove',
                                    data: {},
                                    filter: {
                                        id: ele.id,
                                    },
                                }
                            }
                        ]),
                    });
                } : undefined} onUpdate={ele['#oakLegalActions']?.includes('update') ? () => setUpsertId(ele.id) : undefined}/>
                            </div>)}
                </div>
                <div className={Styles.btnBar}>
                    {canCreate && <Button type="primary" onClick={() => {
                    const id = addItem({ systemId });
                    setUpsertId(id);
                }}>
                        {t('common::action.add')}
                    </Button>}
                </div>
            </div>);
    }
    return (<div className={Styles.container2}>
            <Alert type='info' message={t('tips')}/>
            {U}
            <div className={Styles.body}>
                {canCreate ? <PlusCircleOutlined className={Styles.add} shape="circle" style={{ fontSize: 50 }} onClick={() => {
                const id = addItem({ systemId });
                setUpsertId(id);
            }}/> : t('noData')}
            </div>
        </div>);
}