text: import React, { useState } from 'react'
  import { Typography, Input, Col, Row, Tooltip, Button } from 'antd';
  import books from "../../data/books/books.json";
  import {withRouter, Link} from "react-router-dom";
  import { useDispatch, useSelector } from 'react-redux';
  import { setDungeon, setGarul } from '../../_actions/actions';
  import { parseLang, chooseLang, makeHelmet } from '../utils/func';
  
  /*-- 
  SPDX-FileCopyrightText: © 2021 Hyun Uk Lee <as0266@naver.com>
  
  SPDX-License-Identifier: MIT
  --*/  
  
  const { Search } = Input;
  const { Title } = Typography;
  
  function JobPage() {
      
      const dispatch = useDispatch();
  
      const [SearchName, setSearchName] = useState("")
      const language = useSelector(state => state.language)
  
  
      /**
       * @brief 던전 링크로 넘어갈 때 던전 정보를 세팅해 주는 함수
       */
      const HandleLink = (e) => {
          const info = books.find(element => chooseLang(language, element.name).includes(e.target.innerText))
          window.localStorage.setItem("Time",info.time);
          window.localStorage.setItem("Dungeon",info.dungeonname);
          dispatch(setDungeon(`${info.time}_${info.dungeonname}`));
      }
  
      const HandleLink2 = (e) => {
          const info = books.find(element => chooseLang(language, element.name).includes(e.target.innerText))
          window.localStorage.setItem("Garul_Time",info.garul_time);
          dispatch(setGarul(info.garul_time))
      }
  
      /**
       * @param filtered : 검색창의 문자열이 포함되는 이름 혹은 직업서를 검색
       *                   해당하는 직업서, 이름이 있는 던전 data object들을 반환
       *                   영어의 경우 toLoverCase()를 사용
       */
      const filtered = books.filter(element => (
          element.job.filter(job => parseLang(language,job.name).includes(SearchName.toLowerCase()) 
          || parseLang(language,job.kor).includes(SearchName.toLowerCase())).length !== 0))
  
      const jobNameParsed = [], jobParsed = []
  
      /**
       * @brief : filtered의 모든 job element들에 대해서 parsing을 수행
       *          검색창의 문자열이 포함되는 이름/직업서명이 있는 경우 jobNamedParsed와 jobParsed에 추가
       *          jobNameParsed는 이름만 저장해서 중복을 체크하기 위한 배열
       *          jobParsed는 이름과 직업서 이름이 모두 들어 있어 실제로 mapping에 쓸 배열
       */
      filtered.forEach(element => (
          element.job.forEach(a => {
              if((parseLang(language,a.name).includes(SearchName.toLowerCase()) 
              || parseLang(language,a.kor).includes(SearchName.toLowerCase())) && !jobNameParsed.includes(a.name)) {
                  jobNameParsed.push(a.name)
                  jobParsed.push(a);
              }
          })
      ))
      
      const HandleChange = (e) => {
          setSearchName(e.target.value);
      }
      
      /**
       * @brief : 실제로 mapping을 진행
       *          다른 부분은 그냥 보면 되고
       *          AS나 ES의 경우 왼쪽괄호 '('를 포함하므로 이것으로 걸러주고
       *          NS의 경우 AS, ES가 존재하면 이절, 개전에도 해당 이름이 필터링되기 때문에
       *          null 처리를 하여 표시를 하지 않는다
       */
      const renderSearch = jobParsed.map((list, index)=> (
          <Col xs={12} md={6} lg={4} key={index}>
              <div className="jview-container">
                  <Tooltip title={chooseLang(language,list.name)}>
                      <img alt={list.name} style={{width: "50%", margin: "0 auto"}}
                      src={`images/character_base/${list.name}.png`}/>
                  </Tooltip>
                  <div style={{margin: "5px"}}>
                      {chooseLang(language,list.kor)}
                  </div>
                  <div>
                      {list.name.includes('(') && filtered.filter(element => (element.job.filter(e => e.name.includes(list.name)).length !== 0))
                          .map((a,index) => {
                              if(a.name === "이절" || a.name === "개전") {
                                  return (
                                      <div>
                                          <b style={{fontSize: '12px', color: 'red'}}>{chooseLang(language,a.name)}</b><br/>
                                          {chooseLang(language, '환리경, 가를레아,')}&nbsp;
                                          {chooseLang(language, '일반 VH...')}
                                      </div>
                                  )
                              } else {
                                  return (
                                      <Link to="/dungeon" key={index}>
                                          <Button style={{fontSize: "12px"}} onClick={HandleLink}>{chooseLang(language,a.name)}</Button>
                                      </Link>
                                  )
                              }
                          }) }
                      {filtered.filter(element => (element.job.filter(e => e.name.includes(list.name)).length !== 0))
                          .map((a,index) => {
                              if(a.name === "이절" || a.name === "개전") {
                                  return null
                              } else if (a.name === "명협계") {
                                  return (
                                      <Link to="/etc" key={index}>
                                          <Button style={{fontSize: "12px"}} onClick={HandleLink2}>{chooseLang(language,a.name)}</Button>
                                      </Link>
                                  )
                              } else {
                                  return (
                                      <Link to="/dungeon" key={index}>
                                          <Button style={{fontSize: "12px"}} onClick={HandleLink}>{chooseLang(language,a.name)}</Button>
                                      </Link>
                                  )
                              }
                          })}
                  </div>
              </div>
          </Col>
      ));
  
      return (
          <div className="container" style={{paddingTop: "2rem"}}>
              {makeHelmet(language, "직업서 검색")}
              <Title level={3}>{chooseLang(language, "직업서 검색")}</Title>
              <h3><b>{chooseLang(language,"사진 아래 버튼을 누르시면 해당 던전 정보로 이동합니다.")}</b></h3>
              <br/>
              {chooseLang(language,"단, 이절, 개전은 던전 링크가 표시되지 않습니다.")}            
              <br/>
              <b className="red">{chooseLang(language,"노말 5성 직업서는 Very Hard 난이도에서만 얻을 수 있습니다.")}</b>
              <br/>
              <Search style={{width:"300px", marginTop: "3rem", marginBottom: "2rem"}} 
              placeholder={chooseLang(language,"캐릭터, 책 이름 입력")} 
              value={SearchName} 
              onChange={HandleChange}
              enterButton />
              <Row justify="center">
                  {renderSearch}
              </Row>
          </div>
      )
  }
  
  export default withRouter(JobPage)
  