import * as React from "react"
import "../styles/general.scss"
import MePng from "../images/me_1.jpg"


const SegmentWithImage = ({ segment }) => {
  return (
    <div>
      <img 
        src={ MePng } 
        className="segment_image cover"
      />
      <div className="segment_title segment_title_image">
        { segment.title }
      </div>
      <div className="segment_content_image">
        {
          typeof segment.content === "object" ?
            Object.keys(segment.content).map( (key) => {
                return (
                  <>
                    <div 
                      className="segment_image_item"
                      key={ "item_" + key }
                    >
                      
                      { key + ": " }

                    </div>
                    <div
                      className="segment_image_item subitem"
                    >

                      { 
                        segment.content[key].includes("github.com") ?
                          <a href={ "https://" + segment.content[key] }>
                            { segment.content[key] }
                          </a>
                        :
                          segment.content[key]
                      }

                    </div>
                  </>
                )
              }
            )
          :
            "lol"
        }
      </div>
    </div>
  )
}

const SegmentNormal = ({ segment }) => {
  return (
    <div>
      <div className="segment_title">
        { segment.title }
      </div>
      <div className="segment_content">
        <ul>
          {
            typeof segment.content === "object" ?
              Object.keys(segment.content).map( (key) => {
                  return (
                    <li key={ "item_" + key }>
                      { 
                        typeof segment.content[key] === "object" ?
                          key + ": "
                        :
                          key + ","
                      }
                      <ul>
                        { 
                          typeof segment.content[key] === "object" ?
                            segment.content[key].map( (value, index) => { 
                                return (
                                  <li key={ index }>
                                    { 
                                      typeof value === "object" ?
                                        Object.keys( value ).map( ( key_two, index_two) => {
                                            return (
                                              <>
                                                { key_two + ": " }
                                                <ul key={ index_two }>
                                                  {
                                                    typeof value === "object" ?
                                                      value[key_two].map( (item, index_three) => {
                                                          return (
                                                            <li>      
                                                              { item + "," }
                                                            </li>
                                                          )
                                                        }
                                                      )
                                                    :
                                                      value + ","
                                                  }
                                                </ul>
                                              </>
                                            )
                                          }
                                        )
                                      :
                                        value + ","
                                    }
                                  </li>
                                )
                              } 
                            )
                          :
                            ""
                        }
                      </ul>
                    </li>
                  )
                }
              )
            :
              "lol"
          }
        </ul>
      </div>
    </div>
  )
}

const SegmentRODO = ({ segment }) => {
  return (
    <div>
      <div className="segment_content foot_content">
        { segment.content }
      </div>
    </div>
  )
}


const Segment = ({ index, segment }) => {
  
  let segment_index = "segment_" + index

  return (
    <div 
      className="segment_general"
      id={ segment_index }
      key={ segment_index }
    >
      {
        "image" in segment ?
          <SegmentWithImage
            segment={ segment }
          />
        :
          segment.title === "" ?
            <SegmentRODO
              segment={ segment }
            />
          :
            <SegmentNormal
              segment={ segment }
            />  
      }
    </div>
  )
}


const IndexPage = () => {

  let content_pl = [
    {
      title: "Kamil Żuk",
      image: "me.png",
      content: {
        "E-mail": "zukkamil.44@gmail.com",
        "Github": "github.com/tbs093a",
        "Wykształcenie": "Wyższe / Inżynier",
        "Miejsce Zamieszkania": "Rzeszów / Polska",
        "Data Urodzenia": "30.06.1997 r.",
      }
    },
    {
      title: "Umiejętności",
      content: {
        "Programowanie": [
          "Python - Django / Django REST Framework / Channels 3.0",
          "Javascript - ReactJS / Redux Toolkit",
        ],
        "Konfiguracja Serwerów": [
          "Apache / Nginx (Https-Portal)"
        ],
        "Obsługa Narzędzi DevOps": [
          "Jenkins / Ansible / Docker / Docker-Compose / Docker Swarm / Kubernetes / Automatyzacja w Bash",
        ],
        "Konfiguracja & Administracja Baz Danych": [
          "SQL - MariaDB / MySQL / PostgreSQL",
          "NoSQL - MongoDb / ElasticSearch / Redis"
        ],
        "Język Angielski": [
          "Poziom B2",
        ],
      }
    },
    {
      title: "Doświadczenie",
      content: {
        "Zespół Szkół Elektronicznych w Rzeszowie / Technikum nr 6 - Technik Informatyk - od 2013 do 2017": "",
        "Uniwersytet Rzeszowski - Studia Inżynierskie - Informatyka - od 2017 do 2021": [
          {
            "Praca Inżynierska - Graficzna baza układów dłoni na potrzeby systemu rozpoznawania Polskiego Języka Migowego (PJM)": [
              "integracja Django / Django REST Framework z oprogramowaniem Blender",
              "integracja Djnago / Django REST Framework z bazą danych MongoDb podzielonej na fragmenty (shards)",
              "implementacja protokołu WebSocket (moduł Channles 3.0) do monitorowania procesu renderowania układów dłoni w czasie rzeczywistym",
              "implementacja synchronicznego API w Django REST Framework do zarządzania wyrenderowanymi obrazami oraz modelami 3D",
              "implementacja asynchronicznego API w Django + Channels 3.0 + Redis do nadzorowania procesu renderowania na serwerze w czasie rzeczywistym",
              "implementacja aplikacji klienckiej w ReactJS / Gatsby + Redux Toolkit do obsługi synchronicznego i asynchronicznego API",
              "wdrożenie aplikacji w formie rozproszonej dzięki narzędziom konteneryzacji i orkiestracji Docker + Docker-Compose",
              "implementacja skryptów Bash automatyzujących migrację / konfigurację wszystkich środowisk konteneryzacyjnych na podstawie zmeinnych środowiskowych",
              "wykonanie modelu trójwymiarowgo dłoni przeznaczonego do renderowania realistycznych próbek (zdjęć) układów dłoni, jako materiały do nauki systemu rozpoznawania PJM",
            ]
          }
        ],
        "Sembot Sp. z o. o. - DevOps Engineer & Python Developer - od 01.11.2020": [
          {
            "Obowiązki": [
              "Administracja serwerów (OVH / AWS / Digital Ocean)",
              "Konfiguracja serwerów (Nginx (Https-Portal) / Apache / Docker)",
              "Automatyzacja operacji rutynowych (Ansible / Jenkins pipeline / Bash scripts)",
              "Wdrażanie produkcyjne oprogramowania zorientowanego na kontenerach (Docker / Docker-Compose / Docker Swarm)",
              "Programowanie narzędzi MarchTech (Python / Django / Django REST Framework)",
              "Implementacja, konfiguracja oraz administracja baz danych do obsługi narzędzi MarchTech (Big Data) (MongoDb / Elasticsearch / MariaDb / MySQL / Redis / AWS SQS)"
            ]
          }
        ]
      }
    },
    {
      title: "Zainteresowania",
      content: {
        "Web3.0": [
          "Blockchain / Cryptography / Smart Contracts",
        ],
        "Artificial Intelligence / Machine Learning": "",
        "IT Security": "",
        "Grafika 3D & 2D": "",
      }
    },
    {
      title: "",
      content: "Wyrażam zgodę na przetwarzanie moich danych osobowych dla potrzeb niezbędnych do realizacji procesu rekrutacji zgodnie z Rozporządzeniem Parlamentu Europejskiego i Rady (UE) 2016/679 z dnia 27 kwietnia 2016 r. w sprawie ochrony osób fizycznych w związku z przetwarzaniem danych osobowych i w sprawie swobodnego przepływu takich danych oraz uchylenia dyrektywy 95/46/WE (RODO)."
    }
  ]

  let content_en = [
    {
      title: "Kamil Żuk",
      image: "me.png",
      content: {
        "E-mail": "zukkamil.44@gmail.com",
        "Github": "github.com/tbs093a",
        "Education": "Higher / Engineer",
        "Place of Residence": "Rzeszów / Poland",
        "Date of Brith": "30.06.1997",
      }
    },
    {
      title: "Tech Skills",
      content: {
        "Programming": [
          "Python - Django / Django REST Framework / Channels 3.0",
          "Javascript - ReactJS / Redux Toolkit",
        ],
        "Server Configuration": [
          "Apache / Nginx (Https-Portal)"
        ],
        "DevOps Tools": [
          "Jenkins / Ansible / Docker / Docker-Compose / Docker Swarm / Kubernetes / Bash",
        ],
        "Configuration & Administration": [
          "SQL - MariaDB / MySQL / PostgreSQL",
          "NoSQL - MongoDb / ElasticSearch / Redis"
        ],
        "English": [
          "B2 Level",
        ],
      }
    },
    {
      title: "Experience",
      content: {
        "ZSE in Rzeszów / Technical School - IT - from 2013 to 2017": "",
        "University of Rzeszów - Engineer Studying - IT - from 2017 to 2021": [
          {
            "Thesis - Graphical database of handshapes for the Polish Sign Language (PSL) gesture recognition system": [
              "Django / Django REST Framework integration with 3D objects editor software - Blender",
              "Djnago / Django REST Framework integration with MongoDb sharded database",
              "WebSocket (Channles 3.0 module) implementation for single proccess of handshape render monitoring",
              "Sync Django REST Framework API implementation for ready materials and 3D object files managment",
              "Async Django + Channels 3.0 + Redis  API implementation for live rendering proccess managment",
              "ReactJS / Gatsby + Redux Toolkit client application implementation for simple sync & async backend application functionality control",
              "Application deployment in distributed form as containers with Docker + Docker-Compose tools",
              "Bash scripts implementation for routain operations automatization like databases migration & all app containers configuration",
              "Made 3D hand model for realistic materials (handshapes) rendering as images for learning PSL recognition system",
            ]
          }
        ],
        "Sembot Sp. z o. o. - DevOps Engineer & Python Developer - from 01.11.2020": [
          {
            "Responsibilities": [
              "Server Administration (OVH / AWS / Digital Ocean)",
              "Server Configuratiion (Nginx (Https-Protal) / Apache / Docker)",
              "Routain operations automation (Ansible / Jenkins pipeline / Bash scripts)",
              "Applications deployment oriented on containers (Docker / Docker-Compose / Docker Swarm)",
              "MarchTech tools implementation (Python / Django / Django REST Framework)",
              "Production databases implementation & configuration & administration for MarchTech tools (Big Data) (MongoDb / Elasticsearch / MariaDb / MySQL / Redis / AWS SQS)"
            ]
          }
        ]
      }
    },
    {
      title: "Interests",
      content: {
        "Web3.0": [
          "Blockchain / Cryptography / Smart Contracts",
        ],
        "Artificial Intelligence / Machine Learning": "",
        "IT Security": "",
        "3D & 2D Graph Design": "",
      }
    },
    {
      title: "",
      content: "I agree to the processing of personal data provided in this document for realising the recruitment process pursuant to the Personal Data Protection Act of 10 May 2018 (Journal of Laws 2018, item 1000) and in agreement with Regulation (EU) 2016/679 of the European Parliament and of the Council of 27 April 2016 on the protection of natural persons with regard to the processing of personal data and on the free movement of such data, and repealing Directive 95/46/EC (General Data Protection Regulation)."
    }
  ]

  let eng_ = "🇬🇧"
  let pol_ = "🇵🇱"

  const [content_swapper, set_content_swap] = React.useState(eng_);
  const [content, set_content] = React.useState(content_pl);

  const swap_content = (event) => {
    event.preventDefault()
    if (content_swapper === eng_) {
      set_content_swap(pol_)
      set_content(content_en)
    } else if (content_swapper === pol_) {
      set_content_swap(eng_)
      set_content(content_pl)
    }
  }

  return (
    <>
      <div className="global_segment">
        <div className="title_bar">
          Curriculum Vitae
        </div>
        <div className="language_bar">
          <div onClick={ e => swap_content(e) }>
            { content_swapper }
          </div>
        </div>
        {
          content.map( (value, index) => {
              return (
                <Segment 
                  index={ index }
                  segment={ value }
                />
              )
            } 
          )
        }
      </div>
      <div className="foot">
        
      </div>
    </>
  )
}

export default IndexPage
