//{ () => this.setState({ activePanel: 'shop' }) }

import React from 'react';
import connect from '@vkontakte/vkui-connect';
import PropTypes from 'prop-types';
import {
	View,
	Panel,
	Div,
	Group,
	//Button,
	Cell,
	List,
	Avatar,
	//Input,
	//FormLayout,
	ScreenSpinner,
	//FormLayoutGroup,
//	Link,
	PanelHeader,
	ListItem,
//	Alert,
	osname,
	IOS,
	HeaderButton,
} from '@vkontakte/vkui';
/* VKIcons */
import Icon32Poll from '@vkontakte/icons/dist/32/poll';
//import Icon24Mention from '@vkontakte/icons/dist/24/mention';
//import Icon24Link from '@vkontakte/icons/dist/24/link';
import Icon28ChevronBack from '@vkontakte/icons/dist/24/coins';
import Icon24MarketOutline from '@vkontakte/icons/dist/24/market_outline';
//import Icon24Like from '@vkontakte/icons/dist/24/like';
import Icon24MoreHorizontal from '@vkontakte/icons/dist/24/more_horizontal';
//import Icon24MoneyTransfer from '@vkontakte/icons/dist/24/money_transfer';
import Icon24Back from '@vkontakte/icons/dist/24/replay';
//import Icon24Favorite from '@vkontakte/icons/dist/24/favorite';
//import Icon24Game from '@vkontakte/icons/dist/24/game';
//import Icon24Settings from '@vkontakte/icons/dist/24/settings';
//import Icon24Flash from '@vkontakte/icons/dist/24/flash';
//import Icon24Home from '@vkontakte/icons/dist/24/home';
//import Icon24Market from '@vkontakte/icons/dist/24/market';
//import Icon24Services from '@vkontakte/icons/dist/24/services';

import '@vkontakte/vkui/dist/vkui.css';
import './assets/css/bootstrap.css';
import './assets/css/style.css';

function mclass(n) {
	n += "";
	n = new Array(4 - n.length % 3).join("U") + n;
	return n.replace(/([0-9U]{3})/g, "$1 ").replace(/U/g, "");
}


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

		this.state = {
			activePanel: 'starting',
			popout: null,
			users: [],
			fetchedUser: null
		};


		//this.openDefault = this.openDefault.bind(this);

	}

	componentDidMount() {

		connect.subscribe((e) => {
			switch (e.detail.type) {
				case 'VKWebAppGetUserInfoResult':
					this.setState({ fetchedUser: e.detail.data });
					break;

				default:
					console.log(e.detail.type);
			}

		});

		connect.send('VKWebAppGetUserInfo', {});

		this.setState({ popout: <ScreenSpinner /> });
		setTimeout(() => { this.setState({ popout: null, activePanel: 'main' }) }, 1450);

		fetch('/top').then(res => res.json()).then(users => this.setState({ users }));
	}

	render() {


		return (
			<View popout={this.state.popout} activePanel={this.state.activePanel}>

<Panel id="top">
<PanelHeader
            left={<HeaderButton onClick={() => this.setState({ activePanel: 'main' })}>{osname === IOS ? <Icon28ChevronBack /> : <Icon24Back />}</HeaderButton>}
            addon={<HeaderButton onClick={() => this.setState({ activePanel: 'main' })}>Назад</HeaderButton>}
          >
            Топ
          </PanelHeader>

{this.state.users.map(user =>
	<Cell before={<b className="topcolor">{user.id}</b>}>
	<ListItem
	before={<Avatar src={user.avatar}/>}
	description={`${mclass(user.balance)}👌🏻`}>
	{`${user.username}`}
</ListItem>
</Cell>

  )}

</Panel>

<Panel id="main">
					<Div>
						<div className="row">
						<div className="col-md-12">
								<div className="text-center text-muted">
								<h1><b></b> </h1>
								</div>
								<div className="text-center buttons">
									<div className="d-flex justify-content-around">
										<div className="justify-content-around">
											<button className="btn btn-rating" onClick={() => this.setState({ activePanel: 'top' })} >
												<Icon32Poll className="buttons_custom" />

											</button>
											<p className="text-buttons text-muted text-monospace"></p>
										</div>
										<div className="justify-content-around">
											<button className="btn btn-exchange" onClick={() => this.setState({ activePanel: 'main' })} >
												<Icon24MoreHorizontal className="buttons_custom"/>

											</button>
											<p className="text-buttons text-muted text-monospace"></p>
										</div>
										<div className="justify-content-around">
											<button onClick={() => this.setState({ activePanel: 'main' })} className="btn btn-shop" >
												<Icon24MarketOutline className="buttons_custom" />

											</button>
											<p className="text-buttons text-muted text-monospace"></p>


										</div>
									</div>
								</div>
							</div>


							<div className="container">


							<Group title="Информация" description="">
									<List>


									</List>

								</Group>

							</div>
						</div>
					</Div>
				</Panel>
			</View>
		);
	}
}

App.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 App;