import React, {useState} from 'react';
import {useSelector} from "react-redux";
import {Link} from "react-router-dom";

import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"
import {Footer} from "../../components/Footer/Footer";

import {getProfileInfo} from "../../redux/outstaffingSlice";

import {urlForLocal} from "../../helper";

import reportsIcon from "../../images/reports.png"
import summaryIcon from "../../images/summaryIcon.png"
import timerIcon from "../../images/timerIcon.png"
import paymentIcon from "../../images/paymentIcon.png"
import settingIcon from "../../images/settingIcon.png"
import avatarMok from "../PartnerTreaties/Images/avatarMok.png"

import rightArrow from "../../images/arrowRight.png"

import './profile.scss'
import { CardControl } from '../../components/CardControl/CardControl';
import { Navigation } from '../../components/Navigation/Navigation';

export const Profile = () => {

  const profileInfo = useSelector(getProfileInfo);
  const [user] = useState(localStorage.getItem('role_status') === '18' ? 'partner' : 'developer')
  const [profileItemsInfo] = useState({
    developer: [
      {
        path: 'profile/calendar',
        img: reportsIcon,
        title: 'Ваша отчетность',
        description: '<span></span>Отработанных в этом месяце часов'
      },
      {
        path: 'profile/summary',
        img: summaryIcon,
        title: 'Данные и резюме',
        description: 'Ваше резюме<br/><span>заполнено</span>'
      },
      {
        path: 'profile/tracker',
        img: timerIcon,
        title: 'Трекер времени',
        description: 'Сколько времени занимает<br/> выполнение задач'
      },
      {
        path: '/payouts',
        img: paymentIcon,
        title: 'Выплаты',
        description: 'У вас <span>подтвержден</span><br/> статус самозанятого'
      },
      {
        path: 'profile/settings',
        img: settingIcon,
        title: 'Настройки аккаунта',
        description: 'Перейдите чтобы начать<br/> редактирование'
      }
    ],
    partner: [
      {
        path: 'profile/requests',
        img: reportsIcon,
        title: 'Запросы и открытые позиции',
        description: '<span>У вас 2 вакансии<br/></span>открытые от лица компании'
      },
      {
        path: 'profile/categories',
        img: summaryIcon,
        title: 'Данные персонала',
        description: 'Наши специалисты <br/><span>уже работающие у вас</span>'
      },
      {
        path: 'profile/tracker',
        img: timerIcon,
        title: 'Трекер времени',
        description: 'Контроль времени и<br/> выполнение задач'
      },
      {
        path: 'profile/treaties',
        img: paymentIcon,
        title: 'Договора и отчетность',
        description: 'Ключевые условия<br/> договора'
      },
      {
        path: 'profile/settings',
        img: settingIcon,
        title: 'Настройки аккаунта',
        description: 'Перейдите чтобы начать<br/> редактирование'
      }
    ]
  })

  return (
      <div className='profile'>
        <ProfileHeader/>
        <Navigation />
        <div className='container'>
          <ProfileBreadcrumbs links={[{name: 'Главная', link: '/profile'}]} />
          <h2 className='profile__title'>
            {user === 'developer' ?
                <span><p>Добрый день,&nbsp;</p>{profileInfo.fio}</span>
                :
              'ООО НДВ Консалтинг'
            }
          </h2>
          <div className='summary__info'>
            <div className='summary__person'>
              <img src={profileInfo.photo ? urlForLocal(profileInfo.photo) : avatarMok} className='summary__avatar' alt='avatar'/>
              <p className='summary__name'>
                {user === 'developer' ?
                    <span>{profileInfo.fio}, {profileInfo.specification} разработчик</span>
                    :
                    'ООО НДВ Консалтинг'
                }
              </p>
            </div>
          </div>
          <div className='profile__items'>
            {
              profileItemsInfo[user].map((item, index) => {
                return <CardControl 
                description={item.description} 
                img={item.img}
                path={item.path}
                title={item.title}
                key={index}
                />              
              })
            }
          </div>
        </div>
        <Footer/>
      </div>
  )
};