import React, { useState } from 'react'

import Sleep from '../components/sleep'
import Head from 'next/head'

function PasswordSection() {
  return (
    <>
      <div className={'manualBody'}>
        <p>
          Ha ezt olvasod valszeg már neked is van. Azért lett bevezetve, hogy
          nagyjából zárt legyen a felhasználók köre.
        </p>
        <ul>
          <li>Minden felhasználónak más jelszava van.</li>
          <li>
            Elvileg elég csak 1 szer beírnod, és többet nem kell, de{' '}
            <b>mentsd le biztos helyre a jelszót, hogy később is meglegyen</b>!
            Ha többször kell megadnod, akkor az bug lesz. Ilyenkor ezt{' '}
            <a
              href="http://qmining.frylabs.net/feedback?man"
              target="_blank"
              rel="noreferrer"
            >
              jelentsd
            </a>
            .
          </li>
          <li>
            <i>
              Jelenleg nincs elfelejtett jelszó funkció, ha elfelejted, akkor az
              örökre eltűnik!
            </i>
          </li>
          <li>
            Ha van jelszavad akkor <b>bizonyos határok között</b> te is{' '}
            <a
              href="https://qmining.frylabs.net/pwRequest?man"
              target="_blank"
              rel="noreferrer"
            >
              tudsz generálni
            </a>{' '}
            másoknak (ncore style).
          </li>
          <li>
            Saját jelszavadat ne oszd meg, mivel egyszerre egy helyen lehetsz
            belépve, máshol automatikusan ki leszel jelentkeztetve. (meg minek,
            ha tudsz adni másoknak az előző pont alapján)
          </li>
          <li>
            Mivel senkinek sincs felhasználóneve, csak egy UserID (amit bal alul
            találsz), így az egész teljesen anonim. Emiatt a jelszavakat nem
            lehet megváltoztatni, hogy a szükséges komplexitás megmaradjon.
          </li>
        </ul>
      </div>
      <hr />
    </>
  )
}

function FAQSection() {
  return (
    <>
      <div className={'manualBody'}>
        <ul>
          <li>
            <b>
              Olyan helyeken fut le a script, ahol nem kellene, vagy
              ideiglenesen ki akarod kapcsolni;
            </b>
            <br />
            <i>
              Tampermonkey bővitmény ikon -{'>'} click -{'>'} a scriptet
              kapcsold ki. Csak ne felejtsd el visszakapcsolni ;)
            </i>
          </li>
          <br />
          <li>
            <b>
              Túl nagy a kérdést és a választ megjelenítő ablak, nem tudok a
              válaszra kattintani;
            </b>
            <br />
            <i>
              A felugró ablakot ha minden jól megy akkor a szélénél fogva tudod
              mozgatni, vagy egeret rajtatartva a görgővel tudod állítani az
              áttetszőségét, vagy be tudod zárni jobb felül X-el, vagy egér
              középső gombbal.
            </i>
          </li>
          <br />
          <li>
            <b>Gombok, %-ok, számok;</b>
            <br />
            <img
              style={{ maxWidth: '100%' }}
              src="img/6.png"
              alt="img"
              className={'manual_img'}
            />
          </li>
        </ul>
      </div>
    </>
  )
}

function RiskSection() {
  return (
    <>
      <ul>
        <li>
          <b>Bármikor észrevehetik hogy használod a scriptet</b>
          <br />
          A weboldalt már kevésbé, de úgy nem menti el a kérdéseket a script,
          mert nem fut. Később manuálisan is be lehet majd küldeni
          kérdés-válaszokat.
          <p />
          A script shadow-root hoz teszi hozzá az összes megjelenített
          elementet, így ezeket szinte lehetetlen detektálni. A moodle
          semmiféleképpen nem látja, hogy milyen más oldalak vannak megnyitva a
          böngésződben. Nem látja az XMLHttp requesteket se, amit a script
          végez. Egy Matomo nevű script látja hogy milyen oldalarka navigálsz a
          moodle-ről, de a script nem linkekkel irányít át, hanem javascript
          eseménnyel, amit nem tud nyomon követni.
          <p />
          Aztán ki tudja ténylegesen hogy lehet
        </li>
        <li>
          <b>Bármikor leállhat a szerver</b>
          <br />
          És akkor nem bírod megnézni a válaszokat. Erre van az{' '}
          <a
            href="http://qmining.frylabs.net/allqr.txt?man"
            target="_blank"
            rel="noreferrer"
          >
            {' '}
            összes kérdés TXT
          </a>
        </li>
        <li>
          <b>Akármelyik válasz rossz lehet</b>
          <br />
          Pl.: ha a script rosszul menti le, vagy rossz kérdésre ad választ
        </li>
      </ul>
      <hr />
    </>
  )
}

function WebsiteSaveSection() {
  return (
    <>
      <p>
        Ha hibát észlesz, kérlek jelents. Hogy a hibákat a saját gépemen
        reprodukálni tudjam, és könnyen ki bírjam javítani, sokszor jól jön, ha
        egy lementett weboldalt megkapok, amin a hiba történik. Így lehet
        menteni egy oldalt:
      </p>
      <center>
        <img
          style={{ maxWidth: '100%' }}
          src="img/websitesave.png"
          alt="img"
          className={'manual_img'}
        />
        <br />
        <a href="/feedback" rel="noreferrer">
          Ide tudod feltölteni
        </a>
      </center>
      <p>
        Mivel nincs hozzáférésem semmilyen egyetemi oldalhoz, így csak így tudom
        hatékonyan tesztelni a scriptet. Ezért hatalmas segítség ha feltöltöd
        azt az oldalt amin hibával találkozol.
      </p>
    </>
  )
}

function ScriptReinstallSection() {
  return (
    <>
      <p>
        Jelenleg két helyről lehet telepíteni a scriptet: greasyforkról és a
        weboldalról. A greasyforkos telepítési lehetőség meg fog szűnni, így ha
        onnan telepítetted, akkor nem lesznek frissítések elérhetők (amik nagyon
        fontosak (de tényleg)). Ezért a következő rövid manővert kellene
        végrehajtani, hogy minden zökkenőmentesen menjen:
      </p>
      <ul>
        <li>Böngésző bővítményeidnél kattints a tampermonkey-ra</li>
        <li>Válaszd ki alulról második opciót, ami dashboard néven fut</li>
        <li>
          Ekkor új tabban felugranak telepített scriptjeid. Keresd meg a
          Moodle/Elearning/KMOOC test help-et, és a sor végén kattints a kuka
          gombra
        </li>
        <li>Ha megkérdezi mondd neki, hogy biztos törölni akarod</li>
        <li>
          Ezután simán kattints{' '}
          <a
            href="http://qmining.frylabs.net/install?man"
            target="_blank"
            rel="noreferrer"
          >
            ide
          </a>{' '}
          a script újratelepítéséhez a weboldalról.
        </li>
        <li>
          Kész! Lehet megkérdezi újra, hogy elérheti-e a szervert, de azt csak
          egyszer. Szokásos módon engedélyezd, hogy le bírja kérni a helyes
          válaszokat
        </li>
      </ul>
      Ezzel semmi adat nem vész el, régi jelszó ugyanolyan jó marad (csak ne
      felejtsd azt el)
    </>
  )
}

const pages = {
  faq: { name: 'GYIK', component: FAQSection },
  pw: { name: 'Jelszavak', component: PasswordSection },
  risk: { name: 'Kockázatok', component: RiskSection },
  websitedl: { name: 'Weboldal letöltése', component: WebsiteSaveSection },
  reinstall: {
    name: 'Script újratelepítése',
    component: ScriptReinstallSection,
  },
}

export default function FAQ() {
  const [currPage, setCurrPage] = useState(pages.faq)

  const renderCurrPage = (page) => {
    if (page) {
      return <page.component />
    } else {
      return null
    }
  }

  return (
    <div>
      <Head>
        <title>GYIK - Qmining | Frylabs.net</title>
      </Head>
      <div className={'buttonContainer'}>
        {Object.keys(pages).map((key) => {
          const page = pages[key]
          return (
            <div
              className={`${page === currPage && 'activeButton'}`}
              key={key}
              onClick={() => {
                setCurrPage(page)
              }}
            >
              {page.name}
            </div>
          )
        })}
      </div>
      {renderCurrPage(currPage)}
      <Sleep />
      <p className={'endofpage'} />
    </div>
  )
}