import * as React from 'react';
import { Row, Col, Typography } from 'antd';
import { IStepConnectorForm } from '../../../common/catalogo-protocol';

const { Text, Title } = Typography;

interface ConnectorOverviewProps {
    overview: IStepConnectorForm;
}

interface ConnectorOverviewState {
}

export default class ConnectorOverview extends React.Component<ConnectorOverviewProps, ConnectorOverviewState> {
    constructor(props) {
        super(props);

    }

    render() {
        const { overview } = this.props;
        const center = { display: 'flex', justifyContent: 'center' };

        return (
            <div style={{color: 'white'}}>
                <Row>
                    <Col span={24} style={{...center}}>
                        <img style={{ maxWidth: '100%' }} src={overview.image} />
                    </Col>
                </Row>
                <Row>
                    <Col span={24} style={{...center}}>
                        <Title>{overview.title}</Title>
                    </Col>
                </Row>
                <Row>
                    <Col span={24} style={{...center}}>
                        <Text type="secondary">{overview.description}</Text>
                    </Col>
                </Row>
                <Row>
                    <Col span={24} style={{...center}}>
                        <Text type="secondary">
                            <a href={overview.url} target="_blank">Documentation</a>
                        </Text>
                    </Col>
                </Row>
                <Row>
                    <Col span={24} style={{...center}}>
                        <Text type="secondary">
                            Versions:
                            {
                                Array.isArray(overview.version)
                                    ? overview.version.join(', ')
                                    : overview.version
                            }
                        </Text>
                    </Col>
                </Row>
                {
                    overview.author !== ''
                        ? <Row>
                            <Col span={24} style={{...center}}>
                                <Text type="secondary">Created by {overview.author}</Text>
                            </Col>
                        </Row>
                        : null
                }
            </div>
        );
    }
}