import React, {useState, useEffect} from 'react'
import {useDispatch} from 'react-redux'

import Outstaffing from '../Outstaffing/Outstaffing'
import Description from '../Description/Description'
import {Footer} from '../Footer/Footer'

import {profiles, tags} from '../../redux/outstaffingSlice'

import {useRequest} from "../../hooks/useRequest";
import {LogoutButton} from "../LogoutButton/LogoutButton";


const Home = () => {

  const [isLoadingMore, setIsLoadingMore] = useState(false);
  const [index, setIndex] = useState(4);

  const dispatch = useDispatch();

  const {apiRequest} = useRequest();

  useEffect(() => {
    setIsLoadingMore(true);
    apiRequest('/profile', {
      params: {limit: 1000},
    }).then((profileArr) => {

      dispatch(profiles(profileArr));
      setIsLoadingMore(false)
    });

    apiRequest('/skills/skills-on-main-page', {
    }).then((skills) => {
      if (!skills) {
        return []
      }

      const keys = Object.keys(skills);
      const values = Object.values(skills);

      const tempTags = values.map((value, index) =>
          value.map((val) => {
            return {id: val.id, value: val.tags, name: keys[index]}
          })
      );
      dispatch(tags(tempTags))
    })

  }, [index]);

  const loadMore = (count) => {
    setIndex((prev) => prev + count)
  };

  return (
      <div className='container'>

        <Outstaffing/>
        <Description onLoadMore={loadMore} isLoadingMore={isLoadingMore}/>
        <Footer/>
      </div>
  )
};

export default Home