import Parser from "html-react-parser";
import React from "react";
import { FilterList } from "../components/filters/filter-list";
import { FilterListItem } from "../components/filters/filter-list-item";
import { InfoPanel } from "../components/info-panel";
import { SectionTitle } from "../components/section-title";
import { personalInfo } from "../data/personal-info";
import EnglishResume from "../data/resume/en";
import { techs } from "../data/resume/tech";
import { Layout } from "../layout/layout";
import { PageTitle } from "./components/page-title";
import { ResumeItem } from "./components/resume/item";
import { ResumeList } from "./components/resume/list";

const LANGUAGES = {
  EN: "en",
  NL: "nl",
};

export default function Resume() {
  const language = LANGUAGES.EN;
  const resume = language === LANGUAGES.NL ? EnglishResume : EnglishResume;
  const resumeTitle = language === LANGUAGES.NL ? "Curriculum vitae" : "Resume";
  const technoTitle = language === LANGUAGES.NL ? "Technologieën" : "Technologies";
  const technoDescription =
    language === LANGUAGES.NL
      ? "Onder dit kopje vindt u een aantal interressante technologieën waarmee ik heb gewerkt. Deze lijst is ongeordend en zeker niet volledig maar het geeft een goede indruk van de technologieën waarmee ik werk."
      : "Below you'll find some interesting technologies which I have used in the past. This list is unordered and by no means complete but it does give you an insight of the technologies I have worked with.";

  return (
    <Layout>
      <div>
        {/* <Meta
          title={
            this.props.language == LANGUAGES.NL
              ? "Het CV van Rick van Lieshout"
              : "Rick van Lieshout's resume"
          }
          description={
            this.props.language == LANGUAGES.NL
              ? "Op deze pagina vindt  u informatie over mijn schooling en werk."
              : "On this page you'll find information about the schooling I received and the jobs I worked at."
          }
        /> */}
        <PageTitle title={resumeTitle}></PageTitle>
        <InfoPanel title="Personal Info" pills={personalInfo} />
        {Object.keys(resume).map((val) => {
          return (
            <ResumeList key={val} title={resume[val].title}>
              {resume[val].items.map((item) => {
                return (
                  <ResumeItem
                    key={item.title}
                    start={item.start}
                    end={item.end}
                    title={item.title}
                    image={item.image}
                  >
                    {Parser(item.text)}
                  </ResumeItem>
                );
              })}
            </ResumeList>
          );
        })}

        <SectionTitle>{technoTitle}</SectionTitle>
        <p>{technoDescription}</p>
        <FilterList>
          {techs.map((item) => {
            return <FilterListItem key={item.link} label={item.label} link={item.link} />;
          })}
        </FilterList>
      </div>
    </Layout>
  );
}
