import * as React from 'react';
import {BasicConfig, BasicContainer, BasicContainerPropsInterface} from '../../render/core/Container/types';
import componentLoader from '../../render/util/componentLoader';
import {Card} from '@native-ads/antd';
const { Meta } = Card;
import './Card.less';
import {CardMetaProps, CardProps, CardType} from '@native-ads/antd/lib/card/index';
import { Icon } from '@native-ads/antd';
export class CardConfig extends BasicConfig {
    bodyStyle?: React.CSSProperties;
    bordered?: boolean;
    hoverable?: boolean;
    loading?: boolean;
    cardType?: CardType;
    style?: React.CSSProperties;

    // 自定义渲染 暂不支持
    // cover?: React.ReactNode;
    // extra?: React.ReactNode;
    // title?: React.ReactNode;

    meta?: CardMetaConfig;

    /**
     * 卡片详情内容
     */
    dataSource: {
        title: string;
        content: Array<{
            title: string;
            content: string;
        }>;
    };
    // 卡片底部操作 暂不支持
    // actions?: Array<BasicConfig[]>;
    // tabList?: CardTabListType[];
    // onTabChange?: (key: string) => void;
}
export class CardMetaConfig extends BasicConfig {
    metaStyle?: React.CSSProperties;
    className?: string;

    // 自定义渲染 暂不支持
    // avatar?: BasicConfig[];
    // title?: BasicConfig[];
    // description?: BasicConfig[];
}

export class CardPropsInterface extends BasicContainerPropsInterface {
    info: CardConfig;
}

class AbstractCard extends BasicContainer<CardPropsInterface, {}> {
    constructor(props: CardPropsInterface) {
        super(props);
    }
    private mapCardOptions(info: CardConfig): CardProps {
        return {
            bodyStyle: info.bodyStyle,
            bordered: info.bordered,
            hoverable: info.hoverable,
            loading: info.loading,
            style: info.style,
        };
    }
    private mapCardMetaOptions(info: CardMetaConfig): CardMetaProps {
        return {
            className: info.className,
            style: info.metaStyle
        };
    }
    render() {
        const info = this.getPropsInfo(this.props.info);
        const cardProps = this.mapCardOptions(info);
        const cardMetaProps = this.mapCardMetaOptions(info);
        const dataSource = info.dataSource;

        // 当前卡片内容是否为空的标记
        let checkIndex = true;
        for (let i = 0; i < dataSource.content.length; i++) {
            checkIndex = checkIndex && Boolean(dataSource.content[i].content);
        }

        const metaTitle = (
            <span className="rcre-card-title">
                {dataSource.title}
                <Icon
                    type={(checkIndex ? 'check-c' : 'attention')}
                    className={'rcre-card-icon-' + (checkIndex ? 'check-c' : 'attention')}
                />
            </span>
        );

        const metaDescription = dataSource.content.map((item, key) => {
            if (item.content === '') {
                return (
                    <div key={key}>
                        <span className="rcre-card-description-title warning">{item.title}</span>
                        <span className="rcre-card-description-content warning">空</span>
                    </div>
                );
            } else {
                return (
                    <div key={key}>
                        <span className="rcre-card-description-title">{item.title}</span>
                        <span className="rcre-card-description-content">{item.content}</span>
                    </div>
                );
            }
        });
        return (
            <div className="rcre-card">
                <Card
                    {...cardProps}
                >
                    <Meta
                        title={metaTitle}
                        description={metaDescription}
                        {...cardMetaProps}
                    />
                </Card>
            </div>
        );
    }
}

componentLoader.addComponent('card', AbstractCard, CardPropsInterface);

export default AbstractCard;