import React from 'react';
import PropTypes from 'prop-types';
import {Panel, PanelHeader, HeaderButton, PanelSpinner, Switch, FormStatus, Separator, PullToRefresh, HeaderContext, PanelHeaderContent, Header, Alert, Tooltip, Input, Tappable, Select, Textarea, Checkbox, FormLayout, HorizontalScroll,   Search, ScreenSpinner, Link, ListItem, UsersStack, Epic, Div, CellButton, FixedLayout, TabbarItem,  Tabbar,  platform, TabsItem,  Tabs, IOS, Cell, List, View, Group, Footer, Avatar, Button} from '@vkontakte/vkui';
import Icon28ChevronBack from '@vkontakte/icons/dist/28/chevron_back';
import Icon24Back from '@vkontakte/icons/dist/24/back';
import Icon24Mention from '@vkontakte/icons/dist/24/mention';
import Icon24User from '@vkontakte/icons/dist/24/user';
import Icon24Add from '@vkontakte/icons/dist/24/add';
import connect from '@vkontakte/vkui-connect';
import Icon24List from '@vkontakte/icons/dist/24/list';
import Icon28AddOutline from '@vkontakte/icons/dist/28/add_outline';
import Icon24Filter from '@vkontakte/icons/dist/24/filter';
import Icon28Settings from '@vkontakte/icons/dist/28/settings';
import Icon28Write from '@vkontakte/icons/dist/28/write';
import Icon24Write from '@vkontakte/icons/dist/24/write';
import Icon24Services from '@vkontakte/icons/dist/24/services';
import Icon24Settings from '@vkontakte/icons/dist/24/settings';
import Icon24Search from '@vkontakte/icons/dist/24/search';
import Icon24Info from '@vkontakte/icons/dist/24/info';
import rec from '../img/rec.png';
import Icon24Done from '@vkontakte/icons/dist/24/done';
import Icon16Dropdown from '@vkontakte/icons/dist/16/dropdown';
import Icon28More from '@vkontakte/icons/dist/28/more';
import Icon28KeyboardBotsOutline from '@vkontakte/icons/dist/28/keyboard_bots_outline';
import rezept from '../rezept/rezept.json';
import Icon24Newsfeed from '@vkontakte/icons/dist/24/newsfeed';
import Icon24Favorite from '@vkontakte/icons/dist/24/favorite';
import Icon28Favorite from '@vkontakte/icons/dist/28/favorite';
import Icon24Recent from '@vkontakte/icons/dist/24/recent';
import Icon24Flash from '@vkontakte/icons/dist/24/flash';
import './assets/css/style.css';
import Icon28HelpOutline from '@vkontakte/icons/dist/28/help_outline';
import Icon28InfoOutline from '@vkontakte/icons/dist/28/info_outline';

function openTab(url) {

// Create link in memory

let a = window.document.createElement("a");

a.target = '_blank';

a.href = url;

// Dispatch fake click

let e = window.document.createEvent("MouseEvents");

e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);

a.dispatchEvent(e);

};


const osname = platform();
let thematics = [
    {
        "name": "Сырная соломка",
        "to" : "cip"
    },
    {
        "name": "Пончики ",
        "to" : "apelcin"
    },
    {
        "name": "Бразильский лимонад",
        "to" : "braz"
    },
    {
        "name": "Домашний лимонад",
        "to": "limon"
    },
    {
        "name": "Апельсиновый напиток",
        "to": "sok"
    },
    {
        "name": "Сырные лепешки",
        "to": "persik"
    },
    {
        "name": "Блинные булочки",
        "to": "pet"
    },
    {
        "name": "Запеканка творожная",
        "to": "zapek"
    },
    {
        "name": "Венгерская ватрушка",
        "to": "veng"
    },
    {
        "name": "Тульский пряник",
        "to": "tul"
    },
    {
        "name": "Картофель в духовке",
        "to": "mys"
    },
    {
        "name": "Суп-пюре из кабачков",
        "to": "pyr"
    },
    {
        "name": "Свинина по-барски",
        "to": "svin"
    },
    {
        "name": "Лаханоризо",
        "to": "pirog"
    },
    {
        "name": "Чипсы",
        "to": "chik"
    },
    {
        "name": "Пирог",
        "to": "house"
    },
    {
        "name": "Постные котлеты",
        "to": "okr"
    },
    {
        "name": "Макароны по-флотски",
        "to": "lol"
    }
]

class Home extends React.Component{
    constructor(props){
        super(props)
        this.state = {
        activeStory: 'home',
        popout: null,
        subscriber: false,
        contextOpened: true,
        mode: 'rate',
        search: ''
        }
        this.onStoryChange = this.onStoryChange.bind(this);
        this.onChange = this.onChange.bind(this);
    }

    onChange (search) { this.setState({ search }); }

    get thematics () {
      const search = this.state.search.toLowerCase();
      return thematics.filter(({name}) => name.toLowerCase().indexOf(search) > -1);
    }
    subscribe () {
    this.setState({ subscriber: true });
    connect.send("VKWebAppJoinGroup", {"group_id": 181749512});
    }
    onClick () {
    this.setState({ popout: <ScreenSpinner /> });
    setTimeout(() => { this.setState({ popout: null }) }, 2000);
    }
     onStoryChange (e) {
    this.setState({ activeStory: e.currentTarget.dataset.story })
    }
     share = () => {
     connect.send("VKWebAppShowWallPostBox", {"message": "Я совершаю поиск по рецептам уже ВКонтакте! Давай и ты - https://vk.com/app7022864"});
    }
    render(){
        let { go, nickname, fetchedUser, onClick, usersTop,  userAcc, name, updateUserNickname, id} = this.props;
        return(
       <Epic activeStory={this.state.activeStory} tabbar={
        <Tabbar>
          <TabbarItem
            onClick={this.onStoryChange}
            selected={this.state.activeStory === 'home'}
            data-story="home"
            text = "Рецепты"
          ><Icon28More /></TabbarItem>
          <TabbarItem
            onClick={this.onStoryChange}
            selected={this.state.activeStory === 'es'}
            data-story="es"
            text = "Предложить"

          ><Icon28AddOutline /></TabbarItem>
           <TabbarItem
            onClick={this.onStoryChange}
            selected={this.state.activeStory === 'rate'}
            data-story="rate"
            text = "Информация"
          ><Icon28InfoOutline /></TabbarItem>
        </Tabbar>
      }>
        <View id="home" activePanel="home">
          <Panel id="home">
<PanelHeader>Поиск</PanelHeader>
<Search maxlength="65" value={this.state.search} onChange={this.onChange}/>
<List>
 {this.thematics.map((thematic, i) => <Cell indicator={thematic.new} key={i} expandable onClick={go} data-to={thematic.to}>{thematic.name}</Cell>)
}
</List>
{this.thematics.map ? this.thematics.new === 0 && <div style={{textAlign: "center", color: "#808080"}}><br/>По данному запросу ничего не найдено.</div> : null
}
</Panel>
        </View>
 <View id="es" activePanel="es">
          <Panel id="es">
            <PanelHeader>Предложить рецепт</PanelHeader>
         <Group>
        <FormLayout>
      <FormStatus title="Важно!" state="error">
       Будьте вежливы, помните, модератор в праве отказать Вам без объяснения причины!
      </FormStatus>
       </FormLayout>
        </Group>

               <Group>
               <Div>
        Предлагая рецепт, пожалуйста, укажите:
< br/>       • Название рецепта.
<br />• Ресурс (ссылку на источник - сайт, группа и т.д.).
<br />• Время приготовления.
<br />• Категорию.
<br />• Ингредиенты.
<br />• Рецепт.
      </Div>
      </Group>

               <Footer>
             <Button before={<Icon24Add/>} onClick={() => openTab("https://vk.me/club184207972")} size="xl">Предложить рецепт</Button>
             < br/ >
             <Button before={<Icon24Newsfeed/>}  size="xl" onClick={this.share}>Поделиться на стене</Button>
 </Footer>

   </Panel>
</View>
<View id="rate" activePanel="rate">
           <Panel id="rate">
       <PanelHeader>
            Информация
            </PanelHeader>
  <Group style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                padding: "25px 100px",
                textAlign: "center"
            }}>
                <Div>
                    <img src="https://sun9-33.userapi.com/c857520/v857520470/1fab7/cGU8pMpTjG4.jpg" alt="" style={{
                        width: "100%",
                        boxShadow: "0 0 25px",
                        borderRadius: 35
                    }}/>
                    <h3 style={{ margin: 0, padding: 0, paddingTop: 25 }}>Рецепты</h3>
                </Div>
            </Group>
  <Group>
      <Div>
       Рецепты - сервис, в котором можно найти любой рецепт на свой вкус!
      </Div>
    </Group>
<Group>
      <CellButton onClick={() => openTab("https://vk.com/club184207972")}  before={<Icon24Flash />}>Группа ВКонтакте</CellButton>
    </Group>
<Group>
        <List>
          <Cell
            before={<Avatar style={{ background: 'var(--accent)' }} size={28}><Icon24Info fill="var(--white)" /></Avatar>}
            description="Версия 2.7"
          >
            Информация
          </Cell>
        </List>
      </Group>
   </Panel>
</View>

      </Epic>
    )
  }
}
Home.propTypes = {
    id: PropTypes.string.isRequired,
    go: PropTypes.func.isRequired,
};

export default Home;