import React from 'react';
import { Tag, Descriptions, Image, Space } from 'antd';
import { getLabel, getType, getValue } from '../../utils/usefulFn';
import { get } from 'oak-domain/es/utils/toolkit';
function RenderRow(props) {
    const { type, value, color, t } = props;
    if (type === 'image') {
        if (value instanceof Array) {
            return (<Space wrap>
                    {value.map((ele, index) => (<Image key={index} width={100} height={100} src={ele} style={{ objectFit: 'contain' }}/>))}
                </Space>);
        }
        else {
            return (<Space wrap>
                    <Image width={100} height={100} src={value} style={{ objectFit: 'contain' }}/>
                </Space>);
        }
    }
    if (type === 'enum') {
        <Tag color={color}>
            {value}
        </Tag>;
    }
    return value;
}
export default function Render(props) {
    const { methods, data: oakData } = props;
    const { t, getColor } = methods;
    const { entity, title, bordered, column, renderData, layout = 'horizontal', judgeAttributes, data, } = oakData;
    return (<Descriptions title={title} column={column} bordered={bordered} layout={layout}>
            {judgeAttributes?.map((ele, index) => {
            let renderValue = ele.render ? ele.render(data) : getValue(data, ele.path, ele.entity, ele.attr, ele.attrType, t);
            let renderLabel = getLabel(ele.attribute, ele.entity, ele.attr, t);
            const renderType = getType(ele.attribute, ele.attrType);
            if ([null, '', undefined].includes(renderValue)) {
                renderValue = t('not_filled_in');
            }
            const stateValue = get(data, ele.path);
            const color = getColor(ele.attr, stateValue) || 'default';
            return (<Descriptions.Item key={index} label={renderLabel} span={ele.attribute.span || 1}>
                        <RenderRow type={renderType} value={renderValue} color={color} t={t}/>
                    </Descriptions.Item>);
        })}
        </Descriptions>);
}