import * as React from 'react';
import { FormattedMessage } from 'react-intl';
import { ReactComponent as CloseIcon } from '../images/close.svg';
import { LoadingOutlined } from '@ant-design/icons';
import { stageMapping } from '../common';

interface Props {
    projectName: string;
    percentage: number;
    stage: string;
    close: () => void;
}

export const DeployingCard = (props: Props) => {
    const { projectName, stage, percentage, close } = props;

    return (
        <div className='deploying-wrapper'>
            <div className='deploy-info'>
                <div>
                    {projectName ? (
                        <div className='project-name'>{projectName}</div>
                    ) : (
                        <div className='name-loading'></div>
                    )}
                    <div className='stage-badge'>{stageMapping[stage]}</div>
                </div>
                <div style={{ marginTop: 15, marginBottom: 15 }}>
                    <LoadingOutlined style={{ marginRight: 8 }} />
                    <FormattedMessage id='common.status.doing' />
                    <span style={{ marginLeft: 10 }}>({percentage}%)</span>
                </div>
            </div>
            <button className='btn-danger' style={{ width: '100%' }} onClick={close}>
                <CloseIcon className='vscode-icon' />
                <FormattedMessage id='common.button.cancel' />
            </button>
        </div>
    );
};
