import * as React from 'react';
import { FormattedMessage } from 'react-intl';
import { DeployInfo, getDisplayTimeId, stageMapping, statusDescMapping, statusStyleMapping } from '../common';
import { ReactComponent as RocketIcon } from '../images/rocket.svg';
import { ReactComponent as GlobalIcon } from '../images/global.svg';
import { Col, Row } from 'antd';

interface Props {
    info: DeployInfo;
    isSupport: boolean;
    redeploy: () => void;
    open: () => void;
}

export const DeployInfoCard = (props: Props) => {
    const { info, isSupport, redeploy, open } = props;

    const getDisplayTime = (time: number) => {
        const contentId = getDisplayTimeId(time);
        return <FormattedMessage id={contentId} tagName='span' />;
    };

    return (
        <div className='deploy-info-wrapper'>
            <div className='deploy-info'>
                <div>
                    <div className='project-name'>{info.projectName}</div>
                    <div className='stage-badge'>{stageMapping[info.stage]}</div>
                </div>
                <div style={{ marginTop: 15, marginBottom: 15 }}>
                    <div className={`inline-block dot ${statusStyleMapping[info.deployStatus]}`}></div>
                    <FormattedMessage
                        id={`common.status.${
                            statusDescMapping[statusStyleMapping[info.deployStatus]] || statusDescMapping.gray
                        }`}
                        tagName='span'
                    />
                    {statusStyleMapping[info.deployStatus] === 'green' && <>{getDisplayTime(info?.deployTime)}</>}
                </div>
            </div>
            <Row gutter={[6, 6]}>
                <Col span={16}>
                    <button
                        className={`btn-primary ${isSupport ? '' : 'btn-disable'}`}
                        onClick={redeploy}
                        style={{ width: '100%' }}
                    >
                        <RocketIcon className='vscode-icon' />
                        <FormattedMessage id='common.button.deploy' />
                    </button>
                </Col>
                <Col span={8}>
                    <button className='btn-gray' onClick={open} style={{ width: '100%' }}>
                        <GlobalIcon className='vscode-icon' style={{ height: 14, verticalAlign: 'bottom' }} />
                        <FormattedMessage id='common.button.visit' />
                    </button>
                </Col>
            </Row>
        </div>
    );
};
