import React from "react";
import { Layout } from "../../layout/layout";
import { Section } from "../../components/section";
import { PageTitle } from "./../components/page-title";

export default function Cookies() {
  const cookies = [
    {
      name: "color",
      purpose: "This cookie saves the color preference for the user.",
    },
    {
      name: "CookieConsent",
      purpose: "If set the user has explicitly agreed to cookies.",
    },
  ];

  const browsers = [
    {
      title: "Deleting cookies in Chrome",
      url: "https://support.google.com/chrome/answer/95647?co=GENIE.Platform%3DDesktop&hl=en",
    },
    {
      title: "Deleting cookies in Firefox",
      url: "https://support.mozilla.org/en-US/kb/delete-cookies-remove-info-websites-stored",
    },
    {
      title: "Deleting cookies in Edge",
      url: "https://privacy.microsoft.com/en-us/windows-10-microsoft-edge-and-privacy",
    },
  ];

  let currentCookies = [];

  if (typeof document !== "undefined") {
    if (document.cookie.trim() !== "") {
      currentCookies = document.cookie.split(";");
    }
  }

  return (
    <Layout>
      <PageTitle title="Cookies"></PageTitle>
      <Section title="What in the world is a cookie?">
        <div>
          <p>
            A cookie is a small text file that a website saves on the client computer (your
            computer) to make the website function better. Some examples of what cookies are used
            for:
          </p>
          <ul>
            <li>Remembering what language the website should be in</li>
            <li>Storing your cart when shopping online</li>
            <li>Keeping you logged in</li>
          </ul>
          <p>
            There are also cookies that are not explicitly set by the website owner themselves.
            These are often introduced when websites include projects which have been made by other
            people. Some of these include:
          </p>
          <ul>
            <li>Disqus - A comment system for your website</li>
            <li>
              Google analytics - To track info about the website (i.e how many times each page has
              been seen)
            </li>
            <li>
              Social media (twitter, facebook, etc) - To add in those shiny &quot;like&quot; or
              &quot;tweet&quot; buttons.
            </li>
          </ul>
          <p>
            Cookies like these are stored for pretty much every website you visit and they make the
            World Wide Web what it is today.
          </p>
        </div>
      </Section>
      <Section title={"The EU cookie law"}>
        <p>
          Since mid 2015 every website which is either hosted in Europe or targets the European
          market is required to inform and get consent from users about using cookies. This is
          usually done with a bar at the bottom of the page which can be dismissed with a simple
          button. More information about the legislation around the cookie law can be found{" "}
          <a href="http://ec.europa.eu/ipg/basics/legal/cookies/index_en.htm">here</a>.
        </p>
      </Section>
      <Section title="Cookies used by this website">
        <p>
          This website uses a few cookies to improve the user experience. The ones explicitly set by
          me are:
        </p>
        <div className="table-responsive">
          <table className="table table-hover normalWrap">
            <thead>
              <tr>
                <th>Name</th>
                <th>Purpose</th>
              </tr>
            </thead>
            <tbody>
              {cookies.map((cookie) => {
                return (
                  <tr key={cookie.name}>
                    <td>{cookie.name}</td>
                    <td>{cookie.purpose}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
        <p>
          This does not mean those are the only cookies, some cookies might be set by third parties.
          The table below will list all cookies that are set for this domain.
        </p>
        <div className="table-responsive">
          <table className="table table-hover normalWrap">
            <thead>
              <tr>
                <th>Name</th>
                <th>Value</th>
              </tr>
            </thead>
            <tbody>
              {currentCookies.length === 0 ? (
                <tr>
                  <td>No cookies have been set yet.</td>
                </tr>
              ) : (
                currentCookies.map((cookie) => {
                  const splitCookie = cookie.split("=");
                  return (
                    <tr key={cookie}>
                      <td>{splitCookie[0]}</td>
                      <td>{splitCookie[1]}</td>
                    </tr>
                  );
                })
              )}
            </tbody>
          </table>
        </div>
      </Section>
      <Section title="Revoking cookie access">
        <p>
          All well known browser offer a way for you to revoke any cookie. Explore the links below
          to learn more.
        </p>

        <ul className="dashed">
          {browsers.map((browser) => {
            return (
              <li key={browser.title}>
                <a href={browser.url}>{browser.title}</a>
              </li>
            );
          })}
        </ul>
      </Section>
      {/* <Meta
          title={"Disclaimer"}
          description={
            this.props.language == LANGUAGES.NL
              ? "Disclaimer pagina"
              : "Disclaimer page"
          }
        /> */}
    </Layout>
  );
}
