import React, {useEffect, useState} from 'react';
import {useSelector} from "react-redux";
import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
import {getProfileInfo} from "../../redux/outstaffingSlice";
import {Footer} from '../../components/Footer/Footer'
import {transformHtml, urlForLocal} from "../../helper";

import {useRequest} from "../../HOOks/useRequest";

import arrow from "../../images/right-arrow.png";
import rightArrow from "../../images/arrowRight.png"
import gitImgItem from "../../images/gitItemImg.png"

import './summary.scss'
import {apiRequest} from "../../api/request";

export const Summary = () => {
  const profileInfo = useSelector(getProfileInfo);
  const [openGit, setOpenGit] = useState(false);
  const [gitInfo, setGitInfo] = useState([]);

  useEffect(() => {
    apiRequest(`/profile/portfolio-projects?card_id=${localStorage.getItem('cardId')}`)
        .then(responseGit => setGitInfo(responseGit))
  }, []);
  return (
      <div className='summary'>
        <ProfileHeader/>
        <div className='container'>
          <div className='summary__content'>
            <h2 className='summary__title'>Ваше резюме {openGit && <span>- Git</span>}</h2>
            {openGit && <div className='summary__back' onClick={() => setOpenGit(false)}>
              <img src={arrow} alt='arrow'/>
              <p>Вернуться</p>
            </div>}
            <div className='summary__info'>
              <div className='summary__person'>
                <img src={urlForLocal(profileInfo.photo)} className='summary__avatar' alt='avatar'/>
                <p className='summary__name'>{profileInfo.fio} {profileInfo.specification}</p>
              </div>
              {!openGit &&
              <button className='summary__git' onClick={() => setOpenGit(true)}>Git</button>
              }
            </div>
          </div>
          {!openGit &&
          <div className='summary__skills skills__section'>
            <div className='summary__sections__head'>
              <h3>Основной стек</h3>
              <button>Редактировать раздел</button>
            </div>
            <div className='skills__section__items'>
              <div className='skills__section__items__wrapper'>
                {profileInfo.skillValues && profileInfo.skillValues.map((skill) =>
                    <span key={skill.id} className='skill_item'>{skill.skill.name}</span>
                )}
              </div>
            </div>
          </div>
          }
          {profileInfo.vc_text && !openGit &&
          <div className='summary__experience' dangerouslySetInnerHTML={transformHtml(profileInfo.vc_text)}>
          </div>
          }
          {openGit &&
          <div className='summary__sectionGit'>
            <div className='summary__sections__head'>
              <h3>Страница портфолио кода разработчика</h3>
              <button>Редактировать раздел</button>
            </div>
            <div className='summary__sectionGitItems'>
              {gitInfo.length && gitInfo.map((itemGit) => {
                return <div key={itemGit.id} className='summary__sectionGitItem gitItem'>
                  <div className='gitItem__info'>
                    <div className='gitItem__info__about'>
                      <img src={gitImgItem} alt='gitImg'/>
                      <div className='gitItem__info__name'>
                        <h4>{itemGit.title}</h4>
                        <p>{itemGit.description}</p>
                      </div>
                    </div>
                    <div className='gitItem__info__specification'>
                      <span className='gitItem__lineSkill'/>
                      <p>{itemGit.main_stack}</p>
                    </div>
                  </div>
                  <a className='gitItem__link' href={itemGit.link} target="_blank" rel="noreferrer">
                    <img src={rightArrow} alt='arrowRight'/>
                  </a>
                </div>
              })
              }
            </div>
          </div>
          }
        </div>
        <Footer/>
      </div>
  )
};