import * as React from 'react';
import { FormattedMessage } from 'react-intl';
import { ReactComponent as RocketIcon } from '../images/rocket.svg';
import { ReactComponent as EmptyIcon } from '../images/empty.svg';
import { Empty } from 'antd';
import { UnsupportCard } from './unsupportCard';

interface EmptyProps {
    rpc: any;
    isSupport: boolean;
    stage: string;
    triggerDeploy: () => void;
}

export const EmptyCard = (props: EmptyProps) => {
    const { rpc, isSupport, stage, triggerDeploy } = props;

    return (
        <>
            <Empty
                className='deploy-empty'
                image={<EmptyIcon className='empty-icon' />}
                imageStyle={{ marginBottom: 20 }}
                description={
                    <div>
                        {stage}
                        <FormattedMessage id='info.common.undeploy.desc' />
                    </div>
                }
            >
                <button
                    className={`btn-primary ${isSupport ? '' : 'btn-disable'}`}
                    onClick={triggerDeploy}
                    style={{ width: 160 }}
                >
                    <RocketIcon className='vscode-icon' />
                    <span style={{ fontSize: 13 }}>
                        <FormattedMessage id='info.common.deploy.btn' />
                    </span>
                </button>

                {!isSupport && <UnsupportCard rpc={rpc} />}
            </Empty>
        </>
    );
};
