import React, { useEffect } from 'react';
import { Space, Button, Dropdown, Tooltip } from 'antd';
import Style from './web.module.less';
import { DownOutlined } from '@ant-design/icons';
function ItemComponent(props) {
    const { label, type, onClick, actionLabelMaxWidth } = props;
    const labelStyle = actionLabelMaxWidth
        ? {
            display: 'inline-block',
            maxWidth: actionLabelMaxWidth,
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            whiteSpace: 'nowrap',
            verticalAlign: 'bottom',
        }
        : undefined;
    const labelNode = <span style={labelStyle}>{label}</span>;
    const content = actionLabelMaxWidth ? (<Tooltip title={label} arrow={false}>
            {labelNode}
        </Tooltip>) : (labelNode);
    if (type === 'button') {
        return (<Button onClick={() => onClick()}>
                {content}
            </Button>);
    }
    return <a className={Style.actionLink} onClick={(e) => {
            onClick();
            e.stopPropagation();
            return false;
        }}>
        {content}
    </a>;
}
export default function Render(props) {
    const { methods, data } = props;
    const { t, makeItems } = methods;
    const { schema, actions, onAction, entity, cascadeActions, items, i18n, extraActions, moreItems, actionMaxVisibleCount, actionWrap, actionLabelMaxWidth, } = data;
    const zhCNKeys = i18n?.store?.data?.zh_CN && Object.keys(i18n.store.data.zh_CN).length;
    useEffect(() => {
        makeItems();
    }, [zhCNKeys, actions, cascadeActions, extraActions, actionMaxVisibleCount]);
    return (<div className={Style.panelContainer}>
            <Space align="center" size={12} style={{ width: '100%' }} wrap={actionWrap !== false}>
                {items?.map((ele, index) => {
            return (<ItemComponent key={ele.action} label={ele.label} type="a" actionLabelMaxWidth={actionLabelMaxWidth} onClick={ele.onClick}/>);
        })}
                {moreItems && moreItems.length > 0 && (<Dropdown menu={{
                items: moreItems.map((ele, index) => ({
                    label: <Button key={`btn${index}`} className={Style.actionLinkButton} size="small" type="link" onClick={ele.onClick}>
                            {ele.label}
                        </Button>,
                    key: `btn${index}`,
                })),
            }} placement="top" arrow>
                    <a className={Style.actionLink} onClick={(e) => e.preventDefault()}>
                        <Space size={4}>
                            更多
                            <DownOutlined />
                        </Space>
                    </a>
                </Dropdown>)}
            </Space>
        </div>);
}