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

import { fetchEntity, saveEntity, selector } from './redux.js';
import { connect } from 'react-redux';
import { injectIntl } from 'react-intl';

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

import TemplateSelector from 'components/TemplateSelector';

import Toast from 'components/Toast';

import icons from 'constants/icons';
import images from 'constants/images';
import messages from './messages';
import form from 'lib/form';


import { connectAccount } from 'lib/oauth2-client';

import './style.scss';


class LinkedAccounts extends Component {

    constructor(props) {
        super(props);

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

        this.renderAccount = this.renderAccount;
    }


    componentWillMount() {
        this.props.fetchEntity(global.cfg.unitId);
    }


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


    handleSubmit() {
        this.refs.form.submit();
    }

    renderAccount(id, image, authorizeFn, clear = true) {
        let { intl, data } = this.props;

        let name = messages[`${id}Name`];
        let description = messages[`${id}Description`];
        let button = null;

        if (authorizeFn) {
            if (!data[id]) {
                button = <button type="button" className="connect" onClick={ authorizeFn }>{ intl.formatMessage(messages.buttonConnect) }</button>
            } else if (clear) {
                button = <button type="button" className="disconnect" onClick={ authorizeFn /* FIXME */ }>{ intl.formatMessage(messages.buttonDisconnect) }</button>
            }
        }

        return (
            <PortalOption 
                className="linked-account"
                icon={ <div className="logo" style={ { backgroundImage: `url(${images.googleCalendarLogo})` } }></div> }
                title={ name && intl.formatMessage(name) }
                description={ description && intl.formatMessage(description) }
                buttons={ button }
                />
        );
    }

    authGoogle() {
        connectAccount("google");
    }


    render() {
        let status = this.props.status;
        let pending = !!(status && ( status.isFetching || status.isSaving ));
        let intl = this.props.intl;

        let { unit, unitId } = this.props;

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

                <PortalContainer>

                    <PortalLinks>
                        { this.renderAccount("google", "", this.authGoogle) }
                        {/* this.renderAccount("exchange", exchangeImg, null) */}
                    </PortalLinks>
                    <PortalLinks>
                        {/* this.renderAccount("toggl", togglImg, null) */}
                    </PortalLinks>

                </PortalContainer>

                <ActivityIndicator show={ pending } type="overlay" />
            </div>
        );
    }

}


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



function mapDispatchToProps(dispatch, props) {
    return {
        dispatch,
        fetchEntity: (unitId) => dispatch(fetchEntity(unitId, { unitId }))
    };
}


export default injectIntl(connect(selector, mapDispatchToProps)(LinkedAccounts));
