import React from "react";
import "./App.scss";
import Main from "../Main/Main";
import PoeService from "../Services/Service";
import Nav from "../Nav/Nav";
import { Context } from "../Services/Context";
import { NavLink } from "react-router-dom";

function App() {
  const filterElements = [
    { elem: "None", src: null },
    { elem: "Armour", src: `armour` },
    { elem: "Watchstones", src: `watchstones` },
    { elem: "Weapons", src: `weapon` },
    { elem: "Currency", src: `currency` },
    { elem: "Fragments", src: `fragment` },
    { elem: "Essences", src: `essence` },
    { elem: "Flasks", src: `flask` },
    { elem: "Gems", src: `gem` },
  ];
  const [activeBtn, setActiveBtn] = React.useState(null); //активная конпка в фильтре предметов
  let [item, setItem] = React.useState(null); //предметы для рендера
  let [type, setType] = React.useState(null); //тип, что рендерить броня, оружие итд
  const [itemDetails, setItemDetails] = React.useState({
    id: null,
    name: ``,
    icon: ``,
    price: ``,
  });
  let service = new PoeService();
  //Получаем предметы
  const getItems = (object) => {
    service.getItem(object).then((i) => {
      setItem(i);
    });
  };
  React.useEffect(() => {
    let canceled = false;
    !canceled && getItems(type);
    return () => {
      canceled = true;
    };
  }, [type]);
  //Рендер всех предметов
  const renderItems = (arr) => {
    if (arr) {
      return arr.map(({ id, name, icon, exalted }) => {
        return (
          <li
            className="item"
            key={id}
            onClick={() => {
              setItemDetails({
                ...itemDetails,
                id: id,
                name: name,
                icon: icon,
                price: exalted,
              });
            }}
          >
            <NavLink
              to={`items/${id}`}>
            <img src={icon} alt="img"></img>
                <p>{name}</p>
            </NavLink>
            <p>Price:{exalted}ex</p>
          </li>
        );
      });
    }
  };
  //Рендер выбраного предмета
  const renderItemPage = (arr) => {
    return (
      <section className="item-detail-container">
        <h1>{arr.name}</h1>
        <h2>Price: {arr.price}ex</h2>
        <img src={arr.icon} alt="img"></img>
      </section>
    );
  };
  //рендер фильтр-панели
  const renderFilterElements = (arr) => {
    return arr.map((i, ind) => {
      return (
        <button
          onClick={() => {
            setType(i.src);
            setActiveBtn(ind);
          }}
          className={`btn-elem button ${activeBtn === ind ? `active` : ``}`}
          key={ind}
        >
          {i.elem}
        </button>
      );
    });
  };

  return (
    <Context.Provider
      value={{
        renderItems,
        item,
        renderFilterElements,
        filterElements,
        type,
        renderItemPage,
        itemDetails,
      }}
    >
      <div className="App">
        <Nav />
        <Main />
      </div>
    </Context.Provider>
  );
}

export default App;