import React, {useEffect} from 'react'
import {useHistory, useParams, Link} from 'react-router-dom'
import {useSelector, useDispatch} from 'react-redux'
import {
  currentCandidate,
  selectCurrentCandidate,
  auth
} from '../../redux/outstaffingSlice'
import arrow from '../../images/right-arrow.png'
import rectangle from '../../images/rectangle_secondPage.png'
import Sidebar from '../CandidateSidebar/CandidateSidebar'
import SkillSection from '../SkillSection/SkillSection'
import front from '../../images/front_end.png'
import back from '../../images/back_end.png'
import design from '../../images/design.png'
import {fetchGet} from '../../server/server'
import {Footer} from '../Footer/Footer'

import './candidate.scss'
import {getRole} from '../../redux/roleSlice'
import {useState} from 'react'

const Candidate = () => {
  const history = useHistory();
  const {id: candidateId} = useParams();
  const dispatch = useDispatch();
  const role = useSelector(getRole);
  const [activeSnippet, setActiveSnippet] = useState(true);

  useEffect(() => {
    window.scrollTo(0, 0)
  }, []);

  useEffect(() => {
    fetchGet({
      link: `${process.env.REACT_APP_API_URL}/api/profile/${candidateId}`,
      params: Number(candidateId),
      history,
      role,
      logout: () => dispatch(auth(false))
    }).then((el) => dispatch(currentCandidate(el)))
  }, [dispatch, candidateId]);

  const currentCandidateObj = useSelector(selectCurrentCandidate);

  const {position_id, skillValues, vc_text: text} = currentCandidateObj;

  const setStyles = () => {
    const styles = {
      classes: '',
      header: '',
      img: ''
    };

    switch (Number(position_id)) {
      case 1: {
        styles.classes = 'back';
        styles.header = 'Backend';
        styles.img = back;

        break
      }
      case 2: {
        styles.classes = 'des';
        styles.header = 'Frontend';
        styles.img = front;
        break
      }
      case 3: {
        styles.classes = 'front';
        styles.header = 'Design';
        styles.img = design;
        break
      }
      default:
        break
    }

    return styles
  };

  function createMarkup(text) {
    return {__html: text.split('</p>').join('</p>')}
  }

  const {header, img, classes} = setStyles();

  return (
      <div className='candidate'>
        <div className='row'>
          <div className='col-12'>
            <div className='candidate__title'>
              <h2>
                <span>Аутстаффинг</span> it-персонала
              </h2>
            </div>
          </div>
        </div>

        <div className='row'>
          <div className='col-12 candidate__header'>

            <div className='candidate__arrow' onClick={() => history.push('/')}>
              <div className='candidate__arrow-img'>
                <img src={arrow} alt=''/>
              </div>
              <div className='candidate__arrow-sp'>
                <span>Вернуться к списку</span>
              </div>
            </div>

            <div className='candidate__icon'>
              <h3>{header}</h3>
              <img className={classes} src={img} alt=''/>
            </div>

          </div>
        </div>
        <div className='candidate__main'>
          <div className='row'>
            <div className='col-12 col-xl-4'>
              <Sidebar candidate={currentCandidateObj} position activeSnippet={activeSnippet}
                       setActiveSnippet={setActiveSnippet}/>
            </div>
            {
              activeSnippet ?
                  (
                      <div className='col-12 col-xl-8'>
                        <div className='candidate__main-description'>
                          <img src={rectangle} alt=''/>
                          <p className='candidate__hashtag'># Описание опыта</p>
                          {text ? (
                              <div
                                  className='candidate__text'
                                  dangerouslySetInnerHTML={createMarkup(text)}
                              ></div>
                          ) : (
                              <p className='candidate__text-secondary'>
                                {currentCandidateObj.vc_text
                                    ? currentCandidateObj.vc_text
                                    : 'Описание отсутствует...'}
                              </p>
                          )}
                          {/* <Link to={`/candidate/${currentCandidateObj.id}/form`}>
                  <button type="submit" className='candidate__btn'>
                    Выбрать к собеседованию
                  </button>
                </Link> */}
                          <SkillSection skillsArr={skillValues}/>

                        </div>
                      </div>
                  ) :
                  (
                      // <div className="col-12 col-xl-8">
                      //   <CodeSnippetlighter />
                      // </div>
                      <div className="col-12 col-xl-8">
                        <div className="candidate__works works">
                          <div className="works__body">
                            <div className="works__item item-works">
                              <div className="item-works__body">
                                <Link to="/" className="item-works__link">Vuetifyis.com</Link>
                                <div className="item-works__text">Forked from peluprvi/vuetifyjs.com <br/> Vuetifyjs.com
                                  documentation
                                </div>
                                <div className="item-works__mark">Angular</div>
                              </div>
                            </div>
                            <div className="works__item item-works">
                              <div className="item-works__body">
                                <Link to="/" className="item-works__link">Vuetifyis.com</Link>
                                <div className="item-works__text">Forked from peluprvi/vuetifyjs.com <br/> Vuetifyjs.com
                                  documentation
                                </div>
                                <div className="item-works__mark">Angular</div>
                              </div>
                            </div>
                            <div className="works__item item-works">
                              <div className="item-works__body">
                                <Link to="/" className="item-works__link">Vuetifyis.com</Link>
                                <div className="item-works__text">Forked from peluprvi/vuetifyjs.com <br/> Vuetifyjs.com
                                  documentation
                                </div>
                                <div className="item-works__mark item-works__mark_yellow">Laravel</div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                  )
            }

          </div>
        </div>
        <Footer/>
      </div>
  )
};

export default Candidate