import React, { useState } from "react";

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 actImg from "assets/icons/actTreaties.png";
import arrowItem from "assets/icons/arrows/arrowCheck.png";
import arrowDown from "assets/icons/arrows/arrowDown.png";
import checkImg from "assets/icons/checkTreaties.png";
import lock from "assets/icons/lock.svg";
import lockDone from "assets/icons/lockDone.svg";
import mainTabImg from "assets/icons/mainTreaties.png";
import avatarMok from "assets/images/avatarMok.png";
import logoAstral from "assets/images/logo/astralLogo.png";

import "./partnerTreaties.scss";

export const PartnerTreaties = () => {
  const [toggleTab, setToggleTab] = useState(1);

  const toggleTabs = (index) => {
    setToggleTab(index);
  };
  return (
    <div className="treaties">
      <ProfileHeader />
      <Navigation />
      <div className="container">
        <ProfileBreadcrumbs
          links={[
            { name: "Главная", link: "/profile" },
            { name: "Договора и отчетность", link: "/profile/treaties" },
          ]}
        />
        <h2 className="treaties__title">Договора и отчетность</h2>
        <div className="treaties__tabs">
          <div className="treaties__tabs__head">
            <div
              className={toggleTab === 1 ? "tab active-tab" : "tab"}
              onClick={() => toggleTabs(1)}
            >
              <img src={mainTabImg} alt="img" />
              <p>Основные </p>
            </div>
            <div
              className={toggleTab === 2 ? "tab active-tab" : "tab"}
              onClick={() => toggleTabs(2)}
            >
              <img src={actImg} alt="img" />
              <p>Акты</p>
            </div>
            <div
              className={toggleTab === 3 ? "tab active-tab" : "tab"}
              onClick={() => toggleTabs(3)}
            >
              <img src={checkImg} alt="img" />
              <p>Счета</p>
            </div>
          </div>
          <div className="treaties__tabs__content">
            <div
              className={
                toggleTab === 1
                  ? "treaties__tabs__content__main active__content"
                  : "treaties__tabs__content__main"
              }
            >
              <div className="main__head">
                <p>Реквизиты компании</p>
                <div className="img">
                  <img src={arrowDown} alt="arrow" />
                </div>
              </div>
              <div className="treaties__tabs__content__main__item item notPaid">
                <div className="item__info">
                  <p className="number">
                    Договор № К-1-2022
                    <br />
                    от 01.11.22
                  </p>
                  <div className="astral">
                    <p>Провайдер документооборота: Астрал</p>
                    <div className="img">
                      <img src={arrowDown} alt="arrow" />
                    </div>
                  </div>
                  <img className="logo" src={logoAstral} alt="logo" />
                </div>
                <div className="item__more">
                  <div className="item__more__names">
                    <p>Бойко Кирилл Сергеевич, подписал и отправил документ</p>
                    <p>ООО "Зоря", документ получен</p>
                  </div>
                  <div className="item__more__date">
                    <div className="item__more__date__from">
                      <img src={lock} alt="lock" />
                      <p>01/01/2021</p>
                    </div>
                    <img src={arrowItem} alt="to" />
                    <div className="item__more__date__to">
                      <img src={lockDone} alt="lockDone" />
                      <p>01/02/2021</p>
                    </div>
                  </div>
                </div>
              </div>
              <div className="treaties__tabs__content__main__item item persons">
                <div className="item__info">
                  <p className="number">
                    Доп. соглашение
                    <br /> №12 от 10.05.22
                  </p>
                  <div className="item__person">
                    <div className="item__person__date">
                      <img className="arrow" src={arrowItem} alt="arrow" />
                      <p>На выполнение работ данного сотрудника</p>
                    </div>
                    <div className="item__person__info">
                      <img src={avatarMok} alt="avatar" />
                      <div className="item__person__info__name">
                        <p>Макаренко Дмитрий</p>
                        <span>Дизайнер</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="item__info">
                  <p className="number">
                    Доп. соглашение
                    <br /> №12 от 10.05.22
                  </p>
                  <div className="item__person">
                    <div className="item__person__date">
                      <img className="arrow" src={arrowItem} alt="arrow" />
                      <p>На выполнение работ данного сотрудника</p>
                    </div>
                    <div className="item__person__info">
                      <img src={avatarMok} alt="avatar" />
                      <div className="item__person__info__name">
                        <p>Макаренко Дмитрий</p>
                        <span>Дизайнер</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              className={
                toggleTab === 2
                  ? "treaties__tabs__content__main second active__content"
                  : "treaties__tabs__content__main"
              }
            >
              <div className="main__head acts">
                <div className="provider">
                  <p>Провайдер документооборота: Астрал</p>
                  <img src={logoAstral} alt="astral" />
                </div>
                <div className="info">
                  <p>Реквизиты компании</p>
                  <div className="img">
                    <img src={arrowDown} alt="arrow" />
                  </div>
                </div>
              </div>
              <div className="treaties__tabs__content__main__item item notPaid">
                <div className="item__info">
                  <p className="number">Акт №4 от 10.03.23</p>
                  <div className="item__person__act">
                    <div className="item__person__act__info">
                      <div className="item__person__act__avatar">
                        <img src={avatarMok} alt="avatar" />
                        <div className="item__person__act__name">
                          <p>Макаренко Дмитрий</p>
                          <span>Дизайнер</span>
                        </div>
                      </div>
                      <img
                        className="personArrow"
                        src={arrowItem}
                        alt="arrow"
                      />
                      <p className="moreInfo">к Доп. соглашению № 1</p>
                    </div>
                    <div className="arrow">
                      <img src={arrowDown} alt="arrow" />
                    </div>
                  </div>
                </div>
                <div className="item__more price">
                  <div className="item__more__price">
                    <p className="total">214 500,00 руб</p>
                    <p>147 раб.часов ( 1200руб / час ) </p>
                  </div>
                  <div className="item__more__names">
                    <p>Бойко Кирилл Сергеевич, подписал и отправил документ</p>
                    <p>ООО "Зоря", документ получен</p>
                  </div>
                  <div className="item__more__date">
                    <div className="item__more__date__from">
                      <img src={lock} alt="lock" />
                      <p>01/01/2021</p>
                    </div>
                    <img src={arrowItem} alt="to" />
                    <div className="item__more__date__to">
                      <img src={lockDone} alt="lockDone" />
                      <p>01/02/2021</p>
                    </div>
                  </div>
                </div>
              </div>
              <div className="treaties__tabs__content__main__item item">
                <div className="item__info">
                  <p className="number">Акт №4 от 10.03.23</p>
                  <div className="item__person__act">
                    <div className="item__person__act__info">
                      <div className="item__person__act__avatar">
                        <img src={avatarMok} alt="avatar" />
                        <div className="item__person__act__name">
                          <p>Макаренко Дмитрий</p>
                          <span>Дизайнер</span>
                        </div>
                      </div>
                      <img
                        className="personArrow"
                        src={arrowItem}
                        alt="arrow"
                      />
                      <p className="moreInfo">к Доп. соглашению № 1</p>
                    </div>
                    <div className="arrow">
                      <img src={arrowDown} alt="arrow" />
                    </div>
                  </div>
                </div>
                <div className="item__more price">
                  <div className="item__more__price">
                    <p className="total">214 500,00 руб</p>
                    <p>147 раб.часов ( 1200руб / час ) </p>
                  </div>
                  <div className="item__more__names">
                    <p>Бойко Кирилл Сергеевич, подписал и отправил документ</p>
                    <p>ООО "Зоря", документ получен</p>
                  </div>
                  <div className="item__more__date">
                    <div className="item__more__date__from">
                      <img src={lock} alt="lock" />
                      <p>01/01/2021</p>
                    </div>
                    <img src={arrowItem} alt="to" />
                    <div className="item__more__date__to">
                      <img src={lockDone} alt="lockDone" />
                      <p>01/02/2021</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              className={
                toggleTab === 3
                  ? "treaties__tabs__content__main second active__content"
                  : "treaties__tabs__content__main"
              }
            >
              <div className="main__head acts">
                <div className="provider">
                  <p>Провайдер документооборота: Астрал</p>
                  <img src={logoAstral} alt="astral" />
                </div>
                <div className="info">
                  <p>Реквизиты компании</p>
                  <div className="img">
                    <img src={arrowDown} alt="arrow" />
                  </div>
                </div>
              </div>
              <div className="treaties__tabs__content__main__item item notPaid">
                <div className="item__info">
                  <p className="number">Акт №4 от 10.03.23</p>
                  <div className="item__person__act">
                    <div className="item__person__act__info">
                      <div className="item__person__act__avatar">
                        <img src={avatarMok} alt="avatar" />
                        <div className="item__person__act__name">
                          <p>Макаренко Дмитрий</p>
                          <span>Дизайнер</span>
                        </div>
                      </div>
                      <img
                        className="personArrow"
                        src={arrowItem}
                        alt="arrow"
                      />
                      <p className="moreInfo">к Доп. соглашению № 1</p>
                    </div>
                    <div className="arrow">
                      <img src={arrowDown} alt="arrow" />
                    </div>
                  </div>
                </div>
                <div className="item__more price">
                  <div className="item__more__price">
                    <p className="total">214 500,00 руб</p>
                    <p>147 раб.часов ( 1200руб / час ) </p>
                  </div>
                  <div className="item__more__names">
                    <p>Бойко Кирилл Сергеевич, подписал и отправил документ</p>
                    <p>ООО "Зоря", документ получен</p>
                  </div>
                  <div className="item__more__date">
                    <div className="item__more__date__from">
                      <img src={lock} alt="lock" />
                      <p>01/01/2021</p>
                    </div>
                    <img src={arrowItem} alt="to" />
                    <div className="item__more__date__to">
                      <img src={lockDone} alt="lockDone" />
                      <p>01/02/2021</p>
                    </div>
                  </div>
                </div>
              </div>
              <div className="treaties__tabs__content__main__item item">
                <div className="item__info">
                  <p className="number">Акт №4 от 10.03.23</p>
                  <div className="item__person__act">
                    <div className="item__person__act__info">
                      <div className="item__person__act__avatar">
                        <img src={avatarMok} alt="avatar" />
                        <div className="item__person__act__name">
                          <p>Макаренко Дмитрий</p>
                          <span>Дизайнер</span>
                        </div>
                      </div>
                      <img
                        className="personArrow"
                        src={arrowItem}
                        alt="arrow"
                      />
                      <p className="moreInfo">к Доп. соглашению № 1</p>
                    </div>
                    <div className="arrow">
                      <img src={arrowDown} alt="arrow" />
                    </div>
                  </div>
                </div>
                <div className="item__more price">
                  <div className="item__more__price">
                    <p className="total">214 500,00 руб</p>
                    <p>147 раб.часов ( 1200руб / час ) </p>
                  </div>
                  <div className="item__more__names">
                    <p>Бойко Кирилл Сергеевич, подписал и отправил документ</p>
                    <p>ООО "Зоря", документ получен</p>
                  </div>
                  <div className="item__more__date">
                    <div className="item__more__date__from">
                      <img src={lock} alt="lock" />
                      <p>01/01/2021</p>
                    </div>
                    <img src={arrowItem} alt="to" />
                    <div className="item__more__date__to">
                      <img src={lockDone} alt="lockDone" />
                      <p>01/02/2021</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <Footer />
    </div>
  );
};