import React, { useState } from "react";
import { useSelector } from "react-redux";

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

import { urlForLocal } from "@utils/helper";

import { CardControl } from "@components/CardControl/CardControl";
import { Footer } from "@components/Common/Footer/Footer";
import { Navigation } from "@components/Navigation/Navigation";
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";

import financeIcon from "assets/icons/financeIcon.png";
import paymentIcon from "assets/icons/paymentIcon.png";
import settingIcon from "assets/icons/settingIcon.png";
import summaryIcon from "assets/icons/summaryIcon.png";
import timerIcon from "assets/icons/timerIcon.png";
import avatarMok from "assets/images/avatarMok.png";
import reportsIcon from "assets/images/reports.png";

import "./profile.scss";

export const Profile = () => {
  const profileInfo = useSelector(getProfileInfo);
  const [user] = useState(
    localStorage.getItem("role_status") === "18" ? "partner" : "developer"
  );
  const [profileItemsInfo] = useState({
    developer: [
      {
        path: "profile",
        img: paymentIcon,
        title: "Работа в IT <br/>открытые запросы",
        description: "Перейдите чтобы посмотреть <br/>открытые позиции"
      },
      {
        path: "profile/summary",
        img: summaryIcon,
        title: "Резюме",
        description: "Ваше резюме <br/><span>заполнено</span>"
      },
      {
        path: "profile/tracker",
        img: timerIcon,
        title: "Трекер <br/>времени",
        description: "Сколько времени занимает <br/>выполнение задач"
      },
      {
        path: "profile/payouts",
        img: financeIcon,
        title: "Выплаты и <br/>финансы",
        description: "У вас <span>подтвержден</span> <br/>статус самозанятого"
      },
      {
        path: "profile/settings",
        img: settingIcon,
        title: "Настройки <br/>профиля",
        description: "Перейдите чтобы начать <br/>редактирование"
      },
      {
        path: "profile/calendar",
        img: reportsIcon,
        title: "Ваша <br/>отчетность",
        description: "<span></span>Отработанных в этом месяце часов"
      }
    ],
    partner: [
      {
        path: "profile/requests",
        img: reportsIcon,
        title: "Мои вакансии",
        description:
          "Ваши открытые вакансии, <br/><span>которыми вы можете управлять</span>"
      },
      {
        path: "profile/employees",
        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">
          <span>
            <p>Добрый день,&nbsp;</p>
            {profileInfo?.fio || profileInfo?.username}
          </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">
              <span>
                {profileInfo?.fio || profileInfo?.username}
                {user === "developer" &&
                  `, ${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>
  );
};