import React from 'react';
import connect from '@vkontakte/vkui-connect';
import { View, Alert } from '@vkontakte/vkui';
import '@vkontakte/vkui/dist/vkui.css';
import ReactDOM from 'react-dom';
import {CopyToClipboard} from 'react-copy-to-clipboard';

import Home from './panels/Home';
import Persik from './panels/Persik';
import Game from './panels/Game';
import MapView from './panels/MapView';
import VKCoin from './panels/VKCoin';
import Usites from './panels/Usites';
import Settings from './panels/Settings';
import Flash from './panels/Flash';

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

        this.state = {
            activePanel: 'home',
            fetchedUser: null,
            popout: null,
            header: null,
        };
        this.closePopout = this.closePopout.bind(this);
    };

    componentDidMount() {
        connect.subscribe((e) => {
            switch (e.detail.type) {
                case 'VKWebAppGetUserInfoResult':
                this.setState({ fetchedUser: e.detail.data, activePanel: 'home' });
                break;
                    case 'VKWebAppShowWallPostBoxResult':
                    this.openPopout()
                    break;
                case 'VKWebAppAddToCommunityResult':
                this.openPopout2()
                break;

                case 'VKWebAppFlashGetInfoResult':
              this.openPopout3()
              break;


                default:
                    console.log(e.detail.type);
            }
        });
        connect.send('VKWebAppGetUserInfo', {});
    };

    go = (e) => {
        this.setState({ activePanel: e.currentTarget.dataset.to })
    };

    share = () => {
        connect.send("VKWebAppShowWallPostBox", {"message": "@devbg, участвую! #1multiapp"});
      };

    flasgetinfo = () => {
        connect.send("VKWebAppFlashGetInfo");
      };
    flashlevel1 = () => {
      connect.send("VKWebAppFlashSetLevel", {"level": 1});
      };
    addtocomm = () => {
      connect.send("VKWebAppAddToCommunity", {});
    };
    flashlevel0 = () => {
      connect.send("VKWebAppFlashSetLevel", {"level": 0});
      };

    openPopout = () => {
        this.setState({ popout:
          <Alert
            actions={[{
              title: 'Ок',
              autoclose: true,
              style: 'destructive'
            }]}
            onClose={this.closePopout}
          >
            <h2>Поздравляем Вас!</h2>
            <p>Мы рады, что вы сделали репост! Теперь вы участвуете в конкурсе на 100к VKC!</p>
          </Alert>
        });
      };

      closePopout = () => {
        this.setState({ popout: null });
    };

    position = () => {
        connect.send("VKWebAppGetGeodata", {});
    };

    todark = () => {
    document.body.setAttribute( 'scheme','client_dark' );
    };

    flashgetinfo = () => {
        connect.send("VKWebAppFlashGetInfo", {});
    };

    tolight = () => {
    document.body.setAttribute( 'scheme','client_light' );
    };

    getphone = () => {
        connect.send("VKWebAppGetPhoneNumber", {});
    };

    getfriends = () => {
        connect.send("VKWebAppGetFriends", {});
    };

    getemail = () => {
        connect.send("VKWebAppGetEmail", {});
    };

    noheader = () => {
        this.setState({ header: false })
    };

    openPopout3 = () => {
        this.setState({ popout:
          <Alert
            actions={[{
              title: 'Ок',
              autoclose: true,
              style: 'destructive'
            }]}
            onClose={this.closePopout}
          >
            <h2>Успех!</h2>
            <p>Удалось получить информацию о фонарике!</p>
          </Alert>
        })
    };

    openPopout2 = () => {
        this.setState({ popout:
          <Alert
            actions={[{
              title: 'Ок',
              autoclose: true,
              style: 'destructive'
            }]}
            onClose={this.closePopout}
          >
            <h2>Успех!</h2>
            <p>Удалось добавить приложение в сообщество!</p>
          </Alert>
        })
    };

    render() {
        return (
            <View popout={this.state.popout} activePanel={this.state.activePanel} header={this.state.header}>
                <Home id="home" fetchedUser={this.state.fetchedUser} getfriends={this.getfriends} addtocomm={this.addtocomm} go={this.go} share={this.share} />
                <Persik id="persik" go={this.go} />
                <Game id="game" go={this.go} />
                <MapView id="view" fetchedUser={this.state.fetchedUser} go={this.go} state={this.state} />
                <VKCoin id="coin1" go={this.go} share={this.share} />
                <Usites id="usites" go={this.go} />
                <Settings id="settings" go={this.go} todark={this.todark} tolight={this.tolight} noheader={this.noheader} />
                <Flash id="flash" go={this.go} flashlevel0={this.flashlevel0} flashlevel1={this.flashlevel1} />
            </View>
        );
    }
};

export default App;