import * as React from 'react';
import { FormattedMessage } from 'react-intl';
import { ReactComponent as InfoIcon } from '../images/info.svg';
import { Button } from 'antd';
import { HelpDocumentLink } from '../common';

export const UnsupportCard = (props: { rpc: any }) => {
    const { rpc } = props;

    const openLink = (link: string) => {
        rpc.invoke('openWebLink', [link]);
    };

    const openConfig = () => {
        rpc.invoke('openDeployConfig');
    };

    return (
        <div className='unsupport-tip'>
            <div style={{ display: 'flex' }}>
                <InfoIcon className='info-icon' />
                <div style={{ flex: 1 }}>
                    <FormattedMessage id='info.common.unsupport.desc1' />
                    <Button type='link' onClick={() => openLink(HelpDocumentLink.customizedConfig)}>
                        <FormattedMessage id='info.common.help' />
                    </Button>
                    <FormattedMessage id='info.common.unsupport.desc2' />
                </div>
            </div>
            <div style={{ marginLeft: 30 }}>
                <Button type='link' onClick={openConfig}>
                    <FormattedMessage id='info.common.config' />
                </Button>
            </div>
        </div>
    );
};
