import React, { useState } from "react";

import AuthHeader from "@components/Common/AuthHeader/AuthHeader";
import { Footer } from "@components/Common/Footer/Footer";
import SideBar from "@components/SideBar/SideBar";

import qa from "assets/icons/QA.svg";
import rightArrow from "assets/icons/arrows/arrowRight.svg";
import curse from "assets/icons/curse.svg";
import git from "assets/icons/git.svg";
import myTeam from "assets/icons/myTeam.svg";
import outstaffing from "assets/icons/outstaffing.svg";
import tasks from "assets/icons/tasks.svg";
import arrowInfo from "assets/icons/trackerIntroInfo.svg";
import registrationImg from "assets/images/trackerRegistrationImg.png";

import "./registrationSetting.scss";

export const RegistrationSetting = () => {
  const questions = {
    countPeople: ["Только я", "2-5", "6-12", "13-40", "более 50", "более 100"],
    role: [
      "Лидер команды",
      "Член команды",
      "Менеджер",
      "Программист",
      "Владелец бизнеса"
    ],
    environment: [
      {
        title: "Задачи и трекер",
        subtitle: "Сервис управления проектами и задачами",
        icon: tasks
      },
      {
        title: "Моя команда",
        subtitle: "Данные вашего персонала",
        icon: myTeam
      },
      {
        title: "Тестирование ",
        subtitle: "Сотрудники для вашего сервиса",
        icon: qa
      },
      {
        title: "Гит",
        subtitle:
          "ПО для хостинга IT-проектов и совместной разработки на базе Git",
        icon: git
      },
      {
        title: "Аутстафинг",
        subtitle: "Каталог IT специалистов",
        icon: outstaffing
      },
      {
        title: "Курсы IT ",
        subtitle: "Обучайтесь сами обучайте персонал",
        icon: curse
      }
    ]
  };

  const [selectedOptions, setSelectedOptions] = useState({
    countPeople: "",
    role: ""
  });

  const [selectedEnvironment, setSelectedEnvironment] = useState([]);

  const [step, setStep] = useState(1);

  return (
    <div className="registrationSetting">
      <AuthHeader />
      <SideBar />
      <div className="registrationSetting__content">
        <div className="container">
          <h1 className="registrationSetting__title">
            Добро пожаловать{" "}
            <span>
              в ITGuild
              <img src={arrowInfo} alt="arrow" />
            </span>
          </h1>
          <div className="registrationSetting__question questionBlock">
            <div className="questionBlock__head">
              <span className="questionBlock__suptitle">
                Эти ответы помогут сформировать кабинет
              </span>
              <div className="questionBlock__steps">
                <span className="active" />
                <span className={step >= 2 ? "active" : ""} />
                <span className={step >= 3 ? "active" : ""} />
              </div>
            </div>
            <h3 className="questionBlock__question">
              Со сколькими людьми ты будешь работать?
            </h3>
            <div className="questionBlock__answers">
              {questions.countPeople.map((item, index) => {
                return (
                  <button
                    onClick={() =>
                      setSelectedOptions((prevState) => ({
                        ...prevState,
                        countPeople: item
                      }))
                    }
                    key={index}
                    className={
                      item === selectedOptions.countPeople ? "active" : ""
                    }
                  >
                    {item}
                  </button>
                );
              })}
            </div>
            <img
              className="registrationSetting__question__img"
              src={registrationImg}
              alt="img"
            />
          </div>
          {step >= 2 && (
            <div className="registrationSetting__question questionBlock">
              <h3 className="questionBlock__question">Какая у тебя роль?</h3>
              <div className="questionBlock__answers">
                {questions.role.map((item, index) => {
                  return (
                    <button
                      onClick={() =>
                        setSelectedOptions((prevState) => ({
                          ...prevState,
                          role: item
                        }))
                      }
                      key={index}
                      className={item === selectedOptions.role ? "active" : ""}
                    >
                      {item}
                    </button>
                  );
                })}
              </div>
            </div>
          )}
          {step >= 3 && (
            <div className="registrationSetting__environment environment">
              <span className="environment__suptitle">
                Организуй комфортную среду для продуктивности
              </span>
              <h3 className="environment__title">
                Добавь сервисы для своего рабочего пространства
              </h3>
              <div className="environment__items">
                {questions.environment.map((item, index) => {
                  return (
                    <div
                      className={
                        selectedEnvironment.includes(item.title)
                          ? "environment__item item item--active"
                          : "environment__item item"
                      }
                      key={index}
                      onClick={() => {
                        if (selectedEnvironment.includes(item.title)) {
                          setSelectedEnvironment((prevState) =>
                            prevState.filter((name) => name !== item.title)
                          );
                        } else {
                          setSelectedEnvironment((prevState) => [
                            ...prevState,
                            item.title
                          ]);
                        }
                      }}
                    >
                      <div className="item__head">
                        <img src={item.icon} alt="icon" />
                        <h5>{item.title}</h5>
                      </div>
                      <div className="item__bottom">
                        <p>{item.subtitle}</p>
                        <div className="arrow">
                          <img src={rightArrow} alt="arrow" />
                        </div>
                      </div>
                    </div>
                  );
                })}
              </div>
              <button className="registrationSetting__continue registrationSetting__done">
                Готово
              </button>
            </div>
          )}
          {step !== 3 && (
            <button
              onClick={() => {
                if (step === 1 && selectedOptions.countPeople) {
                  setStep((prevState) => prevState + 1);
                }
                if (step === 2 && selectedOptions.role) {
                  setStep((prevState) => prevState + 1);
                }
              }}
              className="registrationSetting__continue"
            >
              Продолжить
            </button>
          )}
        </div>
        <Footer />
      </div>
    </div>
  );
};
