src/components/views/search/staffResultsItem/StaffResultsItem.tsx

import { StaffResultsItemProps } from "./StaffResultsItemProps";
import "../searchResultsItem/SearchResultsItem.scss";
import "./StaffResultsItem.scss";
import { forwardRef, useState } from "react";

const StaffResultsItem = forwardRef<HTMLDivElement, StaffResultsItemProps>(({ staff, index }, ref) => {
  const [opened, setOpened] = useState<boolean>(false);
  return (
    <div className="staff_result_item" ref={ref}>
      <div className="document">
        <p className="link_button">
          {index + 1}. {staff.person_name}
        </p>
      </div>

      {!opened && (
        <div className="staff_info" style={{ marginLeft: "10px" }}>
          {staff.organizatinal_structure && (
            <div key={staff.organizatinal_structure[0].position} style={{ marginBottom: "15px" }}>
              <div style={{ marginBottom: "5px" }}>
                <strong>Должность:</strong> {staff.organizatinal_structure[0].position}
              </div>
            </div>
          )}
        </div>
      )}

      {opened && (
        <div className="staff_info" style={{ marginLeft: "10px" }}>
          {staff.organizatinal_structure?.map((element) => (
            <div key={element.position} style={{ marginBottom: "15px" }}>
              <div style={{ marginBottom: "5px" }}>
                <strong>Должность:</strong> {element.position}
              </div>
              {element.leads && (
                <div style={{ marginBottom: "5px" }}>
                  <strong>Руководит следующими сотрудниками:</strong>
                  {element.leads?.map((person, index) =>
                    person.person != "undefined" ? <div key={person.person + index}>{person.person}</div> : null
                  )}
                </div>
              )}
              <div style={{ marginBottom: "5px" }}>
                <strong>
                  Руководителем {staff.person_name} является {element?.subordinates?.person_name}
                </strong>
              </div>
            </div>
          ))}
          {staff.business_processes && (
            <div style={{ marginBottom: "10px" }}>
              <strong>Отвечает за бизнес-процессы:</strong>
              {staff.business_processes.map((process, index) => (
                <div key={process.processes_name + index}>{process.processes_name}</div>
              ))}
            </div>
          )}
          {staff.business_curator && (
            <div style={{ marginBottom: "10px" }}>
              <strong>Является бизнес-куратором (РОКС НН):</strong>
              {staff.business_curator.map((company, index) => (
                <div key={company.company_name + index}>{company.company_name}</div>
              ))}
            </div>
          )}
          {staff.groups && (
            <div>
              <strong>Входит в состав групп:</strong>
              <ul>
                {staff.groups.map((personGroup, index) => (
                  <li key={personGroup.group_name + index}>
                    <div style={{ marginBottom: "10px" }}>
                      <div>
                        <strong>{personGroup.group_name}</strong>
                      </div>
                      <strong>Должность внутри группы:</strong> {personGroup.position_in_group.replace("Члены", "Член")}
                    </div>
                  </li>
                ))}
              </ul>
            </div>
          )}
        </div>
      )}
      <div className="actions">
        <button className="link_button" onClick={() => setOpened(!opened)}>
          {opened ? "Свернуть" : "Развернуть"}
        </button>
      </div>
    </div>
  );
});

export default StaffResultsItem;