// App.js
import React from 'react';
import { Root, View } from '@vkontakte/vkui';
import '@vkontakte/vkui/dist/vkui.css';

import Home from './panels/Home';
import Persik from './panels/Persik';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            activeView: 'home',
            homePanel: 'main',
            addPanel: 'main'
        };

        this.go = this.go.bind(this);
        this.changeView = this.changeView.bind(this);
    }

    go(panel) {
        let name = `${this.state.activeView}Panel`;
        this.setState({ [name]: panel });
    }
    changeView(activeView) {
        this.setState({ activeView })
    }

    render() {
        return (
            <Root activeView={this.state.activeView}>
                <View activePanel={this.state.homePanel} id="home">
                    <Home id="main" go={this.go} changeView={this.changeView} />
                    <Persik id="persik" go={this.go} />
                </View>
                <View activePanel={this.state.addPanel} id="add">
                    <Persik id="main" go={this.go} changeView={this.changeView} />
                </View>
            </Root>
        );
    }
}

// Home.js
import React from 'react';
import PropTypes from 'prop-types';
import { Panel, ListItem, Button, Group, Div, Avatar, PanelHeader } from '@vkontakte/vkui';

const Home = ({ id, go, fetchedUser, changeView }) => (
    <Panel id={id}>
        <PanelHeader>Example</PanelHeader>
        <Group title="Navigation Example">
            <Div>
                <Button size="xl" level="2" onClick={() => go('persik')}>
                    Show me the Persik, please
                </Button>
                <Button size="xl" level="2" onClick={() => changeView('add')}>
                    Show me the Persik, please
                </Button>
            </Div>
        </Group>
    </Panel>
);

Home.propTypes = {
    id: PropTypes.string.isRequired,
    go: PropTypes.func.isRequired,
    fetchedUser: PropTypes.shape({
        photo_200: PropTypes.string,
        first_name: PropTypes.string,
        last_name: PropTypes.string,
        city: PropTypes.shape({
            title: PropTypes.string,
        }),
    }),
};

export default Home;

// Persik.js
import React from 'react';
import PropTypes from 'prop-types';
import {Panel, PanelHeader, HeaderButton, platform, IOS} from '@vkontakte/vkui';
import persik from '../img/persik.png';
import './Persik.css';
import Icon28ChevronBack from '@vkontakte/icons/dist/28/chevron_back';
import Icon24Back from '@vkontakte/icons/dist/24/back';

const osname = platform();

const Persik = props => (
    <Panel id={props.id}>
        <PanelHeader
            left={<HeaderButton onClick={() => props.go('main')}>
                {osname === IOS ? <Icon28ChevronBack/> : <Icon24Back/>}
            </HeaderButton>}
        >
            Persik
        </PanelHeader>
        <img className="Persik" src={persik} alt="Persik The Cat" onClick={() => props.changeView('home')} />
    </Panel>
);

Persik.propTypes = {
    id: PropTypes.string.isRequired,
    go: PropTypes.func.isRequired,
};

export default Persik;