/* @flow */
'use strict';

import React from 'react';
import { Link, NavLink } from 'react-router-dom';
import { TransitionGroup, CSSTransition } from 'react-transition-group';

import { DeviceSelect, DeviceDropdown } from './DeviceSelection';
import AccountSelection from './AccountSelection';
import CoinSelection from './CoinSelection';
import StickyContainer from './StickyContainer';
import { findSelectedDevice } from '../../../reducers/TrezorConnectReducer';

const TransitionMenu = (props: any) => {
    return (
        <TransitionGroup component="div" className="transition-container">
            <CSSTransition 
                key={ props.animationType }
                onExit= { () => { window.dispatchEvent( new Event('resize') ) } }
                onExited= { () => window.dispatchEvent( new Event('resize') ) }
                in={ true }
                out={ true }
                classNames={ props.animationType }
                appear={false}
                timeout={ 300 }>
                { props.children }
            </CSSTransition>
        </TransitionGroup>
    )
}

const Aside = (props: any): any => {

    const selected = findSelectedDevice(props.connect);
    const { location } = props.router;

    if (location.pathname === '/' || !selected) return (<aside></aside>);

    // TODO
    // if (selectedDevice.unacquired) {
    //     return (
    //         <aside>
    //             <div className="transition-container"></div>
    //             <a className="help" href="https://trezor.io/support/" target="_blank" rel="noreferrer noopener">
    //                 Need help?
    //             </a>
    //         </aside>
    //     );
    // }

    let menu = <section></section>;
    
    if (props.deviceDropdownOpened) {
        menu = <DeviceDropdown {...props} />;
    } else if (location.params.network) {
        menu = (
            <TransitionMenu animationType={"slide-left"}>
                <AccountSelection { ...props} />
            </TransitionMenu>
        );
    } else if (!selected.unacquired) {
        menu = (
            <TransitionMenu animationType={"slide-right"}>
                <CoinSelection { ...props} />
            </TransitionMenu>
        );
    }

    return (
        <StickyContainer location={ location } devices={ props.deviceDropdownOpened.toString() }>
            <DeviceSelect {...props} />
            { menu }
            <div className="help">
                <a href="https://trezor.io/support/" target="_blank" rel="noreferrer noopener">Need help?</a>
            </div>
        </StickyContainer>
    )
}

export default Aside;