import React, { Component } from "react";
import PropTypes from 'prop-types';

import { injectIntl } from 'react-intl';

import { 
    ActivityIndicator, 
    PortalContainer, PortalLinks, PortalOption, PageTitle, ListTitle,
    Toolbar, ToolbarSection, ToolbarButton, ToolbarButtons, ToolbarRow, 
    Tabs, Tab, ErrorBubble
} from 'lib/components';

import Toast from 'components/Toast';

import icons from 'constants/icons';
import messages from './messages';


class About extends Component {

    constructor(props) {
        super(props);

        this.handleBack = this.handleBack.bind(this);
    }


    handleBack() {
        this.context.router.push('/settings');
    }


    render() {
        let intl = this.props.intl;

        return (
            <div className="pv10">
                <Toolbar>
                    <ToolbarSection>
                        <ListTitle 
                            title={ intl.formatMessage(messages.title) }
                            titleIcon={ icons.aboutSettings }
                            />
                    </ToolbarSection>
                    <ToolbarButtons>
                        <ToolbarButton 
                            label={ intl.formatMessage({ id: "common.button.back" }) }
                            onClick={ this.handleBack } 
                            >
                            <span className="icon">{ icons.back }</span>
                        </ToolbarButton>
                    </ToolbarButtons>
                </Toolbar>

                <div className="pv20">
                    <PortalContainer>
                        <PortalLinks>
                            <PortalOption 
                                icon={ null }
                                title={ intl.formatMessage(messages.userConsentTitle) }
                                description={ intl.formatMessage(messages.userConsentDescription) }
                                buttons={ null }
                                />
                        </PortalLinks>
                        <PortalLinks>
                            <PortalOption 
                                icon={ null }
                                title={ intl.formatMessage(messages.userConsentTitle) }
                                description={ intl.formatMessage(messages.userConsentDescription) }
                                buttons={ null }
                                />
                        </PortalLinks>
                    </PortalContainer>
                </div>
            </div>
        );
    }

}


About.contextTypes = {
    router: PropTypes.object.isRequired
};



export default injectIntl(About);
