import React, { useState, useEffect } from 'react'
import Link from 'next/link'

import Header from '../components/header'

import constants from '../constants'
import styles from './faq.module.css'

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{' '}
            <i>mentsd le biztos helyre a jelszót, hogy később is meglegyen</i>!
            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 <i>bizonyos határok között</i> 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 korlátozott 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>
    </>
  )
}

function FAQSection() {
  return (
    <div className={'manualBody'}>
      <ul>
        <li>
          <b>
            Lehet-e valahol szerkeszteni, törölni, illetve manuálisan hozzáadni
            a meglévő kérdésekhez?
          </b>
          Igen,{' '}
          <a
            href={`${constants.siteUrl}dataeditor`}
            target="_blank"
            rel="noreferrer"
          >
            ezen az oldalon
          </a>{' '}
          van lehetőség erre.
        </li>
        <li>
          <b>
            Mennyire anonymus a weboldal/script, és kiderülhet-e hogy használom?
          </b>
          A weboldal teljesen anonymus, mindenki csak egy számként van
          nyilvántartva (ami a user ID), random generált uuidv4 jelszavak vannak
          (így nicknevek sem kellenek), és még IP cím sincs sehol letárolva
          szerver oldalon.
          <br />
          Több infó a <Link href="/faq?tab=risk">kockázatok résznél</Link>.
        </li>
        <li>
          <b>Ki és miért csinálja ezt a weboldalt?</b>
          Az egész projektet (szerver, weboldal és script) egy személy
          fejlesztette (oldalon id-ja: #1). A weboldal designját #1677
          készítette, illetve egy pár apróbb hozzájárulás (fejlesztésben és
          hardverben) is érkezett a projekthez.
          <br />
          Az egész projekt egy hobby, csupán azért csinálom (#1) mert jó
          időtöltés, és szeretem az ilyen kihívásokat.
        </li>
      </ul>
    </div>
  )
}

function RiskSection() {
  return (
    <>
      Itt {'"én"'} alatt a szerver, weboldal és script egyedüli üzemeltetője
      értendő, az egyetlen személy, aki hozzáfér akármilyen szolgáltatással
      kapcsolatos adathoz, pl.: szerver statisztikák, szerver operációs
      rendszere, beküldött fájlok. A weboldalon a felhasználó azonosítója:{' '}
      <i>#1</i>
      <ul>
        <li>
          <b>Beküldött fájlok kezelése</b>A beküldött fájlokban szerepelhet
          személyes adat, pl.: név. Ha ilyen információval találkozok, akkor azt
          ki szoktam törölni. Ezekhez a fájlokhoz és információkhoz csak én
          férek hozzá, és sehova sincs kiadva. Ezek az információk nincsenek
          sehol gyűjtve.
        </li>
        <li>
          <b>
            Ha esetleg {'"'}lebukik{'"'} a szerver, és tárolt személyes infók
          </b>
          Semmi személyes információ nincs eltárolva szerveren. Egyedüli
          információ amit egyáltalán ki tudnék deríteni az amúgy is az IP címed,
          de az nincs letárolva. Ha nagyon gonosz lennék, akkor a script el
          tudná küldeni a neved és talán még 1-2 adatot a szervernek, de ezt nem
          teszi.
          <p />
          Bizonyíték? A script, weboldal és szerver teljesen nyílt forráskódú,{' '}
          <Link href="/contribute#gitrepo">
            ezek repository-ja publikus
          </Link>{' '}
          (contribute oldal alja), és akármikor felülvizsgálható. A script a te
          böngésződben fut, tampermonkey bővítmény menüjében megtekinthető
          milyen kód fut pontosan.
        </li>
        <li>
          <b>Bármikor észrevehetik hogy használod a scriptet</b>A weboldalt már
          kevésbé, de úgy nem menti el a kérdéseket a script, mert nem fut.{' '}
          <a
            href={`${constants.siteUrl}dataeditor`}
            target="_blank"
            rel="noreferrer"
          >
            Manuálisan is be lehet küldeni kérdés-válaszokat.
          </a>
          <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 oldalakra 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>
          É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>
          Pl.: ha a script rosszul menti le, vagy rossz kérdésre ad választ
        </li>
      </ul>
    </>
  )
}

function WebsiteSaveSection() {
  return (
    <>
      <p>
        Ha hibát találsz, 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>
      <ul>
        <li>
          Lementett oldalon jobb klikk, oldal mentése
          <br />
          <img
            src="img/faq/sitesave-1.jpg"
            alt="img"
            className={'manual_img'}
          />
        </li>
        <li>
          A lementett oldal egy fájlból és mappából áll.
          <br />
          <img
            src="img/faq/sitesave-2.jpg"
            alt="img"
            className={'manual_img'}
          />
        </li>
        <li>
          A fájlt nyisd meg szövegszerkesztővel (notepad), és keress rá a
          nevedre, majd (csak a neved, ne a sort) töröld ki, és mentsd el. Nem
          szoktam megnézni a neveket, nem is tudok velük mit kezdeni, és nem is
          adom ki soha. Amit beküldesz, azt csak én látom.{' '}
          <Link href="/faq?tab=risk">Több infó itt</Link>{' '}
        </li>
        <li>
          <Link href="/contact">Ide tudod feltölteni</Link>{' '}
        </li>
      </ul>
      <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 ScriptSection() {
  return (
    <div className={'manualBody'}>
      <ul>
        <li>
          <b>Hogy kell a scriptet telepíteni, és milyen oldalakon működik? </b>
          <Link href="/script">Ezen az oldalon van leírva</Link>{' '}
        </li>
        <li>
          <b>Hogyan működik a script?</b>
          <ul>
            <li>
              Az egész folyamat a teszt ellenőrzés oldalon kezdődik, a script
              onnan beolvassa, és szervernek beküldi a helyes válaszokat
            </li>
            <li>
              Ezután ha újból kitöltöd a tesztet, vagy ugyanazzal a kérdéssel
              találkozol másik tesztben (pl.: gyakorló teszt után zh/vizsga)
              akkor ott megjeleníti a választ
            </li>
            <li>
              Más felhasználóknak köszönhetően már valószínűleg lesznek
              megoldások a tesztjeidhez. <Link href="/allQuestions">Itt</Link>{' '}
              meg tudod tekinteni, hogy vannak-e válaszok a tárgyadhoz.
            </li>
            <li>
              Ha teszt ellenőrzés oldal nem elérhető, vagy nem egyértelműen
              kitalálható a helyes válasz, akkor a script nem tud mit csinálni,
              nem ment le semmit
            </li>
          </ul>
        </li>
        <li>
          <b>
            A teszt ellenőrző oldal nem elérhető. Ilyenkor lehet valamit tenni,
            hogy mégis el legyenek mentve a válaszok?
          </b>
          A{' '}
          <a
            href={`${constants.siteUrl}dataeditor`}
            target="_blank"
            rel="noreferrer"
          >
            dataeditor
          </a>{' '}
          oldal erre is jó, a <i>Kitöltetlen tesztek</i> részhez a script
          automatikusan feltölti a kérdéseket még megoldás közben. Ehhez nincs
          lementve helyes válasz, de ezt te utólag bejelölheted, és beküldheted.
        </li>
        <li>
          <b>
            Olyan helyeken fut le a script, ahol nem kellene, vagy ideiglenesen
            ki akarom kapcsolni
          </b>
          Tampermonkey bővítmény ikon böngészőben -{'>'} click -{'>'} a scriptet
          kapcsold ki. Csak ne felejtsd el visszakapcsolni {';)'}
        </li>
        <li>
          <b>
            Túl nagy a kérdést és a választ megjelenítő ablak, nem tudok a
            válaszra kattintani
          </b>
          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.
        </li>
        <li>
          <b>Script felugró ablakon szereplő adatok és gombok értelmezése</b>
          <img
            className={'manual_img'}
            src="img/scriptimg/script-3.jpg"
            alt="img"
          />
          <ul>
            <li>
              Felső középső szöveg:
              <br />
              [Talált kérdés tárgya] - [Talált kérdés adatbázisának neve]
            </li>
            <li>
              Jobb oldalt nyilak:
              <br />
              Ha több kérdés van egy oldalon, akkor azzal lehet váltogatni
            </li>
            <li>
              Bal oldalt felső szám (5./1.)
              <br />
              Azt jelöli, hogy éppen hányadik kérdés válasza van megjelenítve.
              Itt a 5./1. azt jelenti, hogy a tesztben a 5. kérdés 1. talált
              válasza.
            </li>
            <li>
              Bal oldalt %
              <br />A szerver szerint hány százalékban egyezik a talált válasz
              azzal, amit tényleg keresni kell
            </li>
            <li>
              Középen
              <br />
              Első sorban kérdés, másodikban válasz (ha a sor hosszú, akkor
              megtörhet)
            </li>
          </ul>
          <img
            className={'manual_img'}
            src="img/scriptimg/script-4.jpg"
            alt="img"
          />
          <ul>
            <li>
              Alul nyilak:
              <br />
              Itt egy kérdésre több találat van, így közöttük neked kell
              eldönteni, hogy mi a helyes válasz. Ez akkor van, ha a kérdés
              szövege ugyan az, de más válasz is lehet. A nyilak segítségével
              válogathatsz a válaszok között.
            </li>
            <li>
              Bal oldalt felső szám (1./3.)
              <br />
              Itt az 1. azt jelenti hogy az oldalon az első kérdéshez van
              megjelenítve a válasz, a 3. pedig azt, hogy a sok talált válaszok
              közül a 3.
            </li>
            <li>
              A kérdés mellett lévő [0]
              <br />A teszt kérdésben itt épp egy kép van, és azt jelenti a
              szögletes zárójelben lévő szám. A tesztben lévő képnél is
              megjelenik ez a [0] azonosító, hogy könnyen párosítani lehessen.
              <br />
              Ez akkor hasznos, ha képekhez tartozik a válasz. Ekkor figyelni
              kell, mert a képek nem biztos hogy jó sorrendben vannak a tesztben
              a talált válaszhoz képest, de a []-ben lévő azonosítók segítenek.
            </li>
          </ul>
        </li>
      </ul>
    </div>
  )
}

function AddSite() {
  return (
    <>
      Jelenleg az, hogy a script melyik oldalakon fut bele van égetve a script
      forráskódjába. Ez itt látható:{' '}
      <a
        rel="noreferrer"
        target="_blank"
        href="https://gitlab.com/MrFry/moodle-test-userscript/-/blob/master/stable.user.js#L52"
      >
        stable.user.js#L52
      </a>
      {'. '}
      Ez azért van így, hogy biztos csak olyan oldalakon fusson a script amit
      támogat is.
      <p />
      Ehhez persze kézzel hozzá lehet adni ideiglenesen bármilyen oldalt, hogy
      kipróbáld ott működik-e. Akár működik, akár nem kérlek szólj, és frissítem
      a scriptet hogy azon a domainen is fusson és működjön alapból.
      <p />
      Egyetem moodle oldalának hozzáadása a scripthez kézzel:
      <ul>
        <li>
          <Link href="/script">Először telepítsd a scriptet rendesen</Link>{' '}
        </li>
        <li>
          Böngészőben nyisd meg a Tampermonkey bővítményt <br />
          <img className={'manual_img'} src={`img/faq/siteadd-1.png`} />
          <br />
          Itt kattints a Dashboard-ra.
        </li>
        <li>
          Keresd meg a scriptet, majd kattints rá:
          <br />
          <img className={'manual_img'} src={`img/faq/siteadd-2.png`} />
        </li>
        <li>
          A felugró szerkesztőben keresd meg a következő sorokat:
          <br />
          <img className={'manual_img'} src={`img/faq/siteadd-3.png`} />
        </li>
        <li>
          Itt az egyik <i>@match ...</i> sor után egy új sorban írd be az
          egyetemed moodle oldalának címét. Ha ez a cím pl.:{' '}
          <i>https://moodle.egyetem.hu/main/akármi</i>, akkor a következőre írd
          át: <i>https://moodle.egyetem.hu/*</i>. Fenti képen látsz néhány
          példát. <i>A {'"*"'} a végén fontos!</i>
        </li>
        <li>
          Ezután mentsd el (ctrl + s, vagy file {'->'} save). Ha minden jól
          ment, akkor elég frissíteni a moodle oldalát, és a script futni fog
          rajta. Ezek után azon az oldalon amit beírtál meg kell jelennie a
          Tampermonkey menüjében is:
          <br />
          <img className={'manual_img'} src={`img/faq/siteadd-4.png`} />
        </li>
        <li>
          Ha a tesztek közben mégsem megy, akkor ellenőrizd, hogy a beírt moodle
          cím egyezik-e a teszt közbenivel. Ha kell egy kis segítség, kérdésed
          van, nem működik valami, vagy éppen működik, de alapból nincs
          hozzáadva: <Link href="/contact">írj a kapcsolat oldalon!</Link>
        </li>
      </ul>
    </>
  )
}

const pages = {
  faq: { name: 'Vegyes általános kérdések', component: FAQSection },
  script: {
    name: 'Script specifikus kérdések',
    component: ScriptSection,
  },
  pw: { name: 'Infó jelszavakról', component: PasswordSection },
  risk: {
    name: 'Kockázatok, személyes infók kezelése',
    component: RiskSection,
  },
  websitedl: {
    name: 'Teszt közbeni hiba jelentése',
    component: WebsiteSaveSection,
  },
  addsite: {
    name: 'Futtatás (még) nem támogatott oldalon',
    component: AddSite,
  },
}

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

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

  useEffect(() => {
    router.replace(`${router.asPath.replace('.html', '')}`, undefined, {
      shallow: true,
    })
  }, [])

  useEffect(() => {
    if (router.query.tab) {
      setCurrPage(pages[router.query.tab])
    }
  }, [router.query.tab])

  return (
    <div>
      <Header title={'GYIK'} />
      <div className={'pageHeader'}>
        <h1>Gyakran Ismételt Kérdések</h1>
      </div>
      <div className={'buttonContainer'}>
        {Object.keys(pages).map((key) => {
          const page = pages[key]
          return (
            <div
              className={`${page === currPage ? 'activeButton' : ''}`}
              key={key}
              onClick={() => {
                setCurrPage(page)

                router.replace(
                  `${router.pathname}?tab=${encodeURIComponent(key)}`,
                  undefined,
                  { shallow: true }
                )
              }}
            >
              {page.name}
            </div>
          )
        })}
      </div>
      <hr />
      <div className={styles.content}>{renderCurrPage(currPage)}</div>
      <hr />
    </div>
  )
}