import React, { useState } from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  NavLink
} from "react-router-dom";
//import TopPanel from "./Componets/TopPanel/topPanel";
import AppConteiner from "./Componets/AppContainer";

import MainPage from "./pages/main";
import PageCatalog from "./pages/catalog";
import PageOverlays from "./pages/overlays";
import PageSettings from "./pages/settings";
import PageDocs from "./pages/docs";
import New from "./pages/news/news";
import PkgList from "./pages/pks";
//import PageCommunity from "./pages/Community";
// import  style && data
import "./style.css";
import all_pkgs from "./pkg.json";
import NavBar from "./Componets/NavList/navList";
import "react-pro-sidebar/dist/css/styles.css";

const news = [
  { title: "test" },
  { title: "Добавлены геннрируемые списки рекомендаций(Back)" },
  { title: "Добавлена раскраска версии(UI)" },
  { title: "Преведены в порядок списки оверлеев(UI)" },
  { title: "добавлены в UI новости" },
  { title: "Исправлены стили(UI) оверлеев" },
  { title: "Добавлена возможность многоязычности (UI)" },
  { title: "Изменена верстка" },
  { title: "Добавлена раскраска версиий" },
  { title: "Добавлен функционал поиска через BackEnd" },
  { title: "Добавлен фуннкционал вывода информации о пакете из каталога" }
];
//Debug  prtnt
function print(text) {
  console.log(text);
}
const communiy = {};
// dataApp
const pkgs = all_pkgs.Catalog;
const overlays = all_pkgs.overlays;
const recovers = all_pkgs.recovers;
const aliases = all_pkgs.aliases;
print(pkgs);

export default class BasicExample extends React.Component {
  //const [null, setPackage] = useState('');
  menuItems = [
    {
      name: "home",
      text: "Главная",
      url: "/",
      Component: MainPage,
      params: {
        rec: recovers,
        category: pkgs,
        aliases: all_pkgs.aliases
        //ViewPackageInfo: this.ViewPackageInfo
      }
    },
    //{ name: "catalog", text: "Программы", url: "/catalog" },
    {
      name: "overlays",
      text: "Оверлеи",
      url: "/overlays",
      Component: PageOverlays
    },
    {
      name: "settings",
      text: "Настройки",
      url: "/settings",
      Component: PageSettings
    },
    { name: "docs", text: "Документы", url: "/docs", Component: PageDocs },
    { name: "news", text: "Новости", url: "/news", Component: New },
    { name: "comm", text: "Сообщества", url: "/community" }
  ];
  icons_demo = {
    "element-desktop-bin":
      "https://freeappsforme.com/wp-content/uploads/2020/10/Element-Messenger-2039x2048.jpg",
    "telegram-desktop-bin":
      "https://providers.by/wp-content/uploads/2020/01/1.png",
    pidgin:
      "https://www.clipartmax.com/png/middle/302-3025613_pidgin-logo-pidgin-icon.png",
    teams:
      "https://www.kindpng.com/picc/m/363-3637910_microsoft-teams-download-hd-png-download.png",
    slack:
      "https://im0-tub-ru.yandex.net/i?id=ad526f7eab39f3a5871afd34bccfda82&n=13",
    mixxx:
      "https://icons.iconarchive.com/icons/alecive/flatwoken/512/Apps-Mixxx-icon.png",
    clementine:
      "https://im0-tub-ru.yandex.net/i?id=91d4c95f8aff7cd0f7b53542c4b1182b&n=13",
    audacity:
      "https://im0-tub-ru.yandex.net/i?id=1fb204870ded2e7021493fbc2377dc6b&n=13",
    kdenlive:
      "https://upload.wikimedia.org/wikipedia/commons/thumb/6/64/Logo-kdenlive.svg/1200px-Logo-kdenlive.svg.png",
    "obs-studio":
      "https://im0-tub-ru.yandex.net/i?id=805e8522ac46aa28ea5f34cdfcfa6905&n=13",
    gimp:
      "https://im0-tub-ru.yandex.net/i?id=aaf8432a4dd10b344c3e1bb0000f65d3&n=13",
    blender:
      "https://im0-tub-ru.yandex.net/i?id=fb5c0689a49f306effe3b150123ace9a&n=13",
    inkscape:
      "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Inkscape_logo_%282-colour%29.svg/1200px-Inkscape_logo_%282-colour%29.svg.png",
    nano:
      "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Gnu-nano.svg/150px-Gnu-nano.svg.png"
  };

  PkgName = {};
  ViewPackageInfo(name) {
    alert(
      name.Name +
        "\n" +
        name.Description +
        "\n" +
        name.version.map((v) => v.split("[U]") || v.split("[M]")) +
        "\n" +
        name.USE.map((u) => u) +
        "\n" +
        name.repo +
        "\n"
    );
    return <sCard PackageName={name} />;
    //this.PkgName = name;
  }
  ViewListPkgs(listpkgs) {
    listpkgs.map((p, i) => console.log(p + "\n"));
    alert(listpkgs.length + "\n" + listpkgs.map((p, i) => String(p) + "\n"));
  }
  //<TopPanel menuItem={this.menuItems} />
  render() {
    return (
      <div ClassName="app">
        <Router>
          {
            //<NavBar category={pkgs} menuItem={this.menuItems} />
          }
          <AppConteiner
            category={pkgs}
            aliases={aliases}
            menuItems={this.menuItems}
            icons={this.icons_demo}
            rec={recovers}
          >
            <Switch>
              {/*this.menuItems.map((route) => (
              <Route exact path={route.url} component={route.Component} />
            //))*/}
              <Route exact path="/">
                <MainPage icons={this.icons_demo} rec={recovers} />
              </Route>

              <Route path={this.menuItems[1].url} component={PageOverlays}>
                <PageOverlays repositores={overlays} />
              </Route>

              <Route path={this.menuItems[2].url}>
                <PageSettings />
              </Route>

              <Route path={this.menuItems[3].url}>
                <PageDocs />
              </Route>
              <Route path={this.menuItems[4].url}>
                <New news={news} />
              </Route>
              <Route path={this.menuItems[5].url}>
                <div>Calculte Linux</div>
              </Route>
              <NavLink path="/pkg">
                {console.log(this.PkgName)}
                <PkgList PackageName={this.PkgName} />
              </NavLink>
            </Switch>
          </AppConteiner>
        </Router>
      </div>
    );
  }
}
