Notes

import React, { useState } from 'react';
import { JsonEditor } from 'json-edit-react';
import SidebarLeftIcon from '@apple/symbols/medium/sidebar.left.svg';
import styles from './debug-list-v2.scss';
import PreviewIcon from '../../../icons/Preview.svg';
import SidebarModal from './SidebarModal';
import NavTabs from '../../../components/NavTabs';

function DebugListV2({ debugList, show, onToggle }) {
const [selectedIndex, setSelectedIndex] = useState(null);
const [searchText, setSearchText] = useState('');
const [showModal, setShowModal] = useState(false);
const [activeTabs, setActivetabs] = useState({});

function handleClickEvent(event) {
const preElement = event.currentTarget;
if (event.detail === 4) {
const range = document.createRange();
const selection = window.getSelection();
range.selectNodeContents(preElement);
selection.removeAllRanges();
selection.addRange(range);
}
}

function handleTabClick(index, val) {
console.log('testhere')
setActivetabs((prevTabs) => ({
...prevTabs,
[index]: val,
}));
}

console.log(selectedIndex,'selectedIndex')

return (
<div className={`debug-component ${styles.debugList} ${show ? 'expanded' : 'collapsed'}`}>
<div className="debug-list-wrapper">
<h3>
{onToggle ? (
<>
<SidebarLeftIcon
className="sidebar-left-icon"
layoutMode="glyphBox"
desiredFontSize={13}
onClick={onToggle}
/>{' '}
</>
) : null}
API Calls
</h3>
{show ? (
<ul>
{debugList.map((item, idx) => {
if (item.type === 'separator') {
return (
<h4 key={idx} className={item.className}>
{item.title}
</h4>
);
} else {
return (
<li
key={idx}
className={selectedIndex === idx ? 'active' : ''}
onClick={() => {
setSelectedIndex(idx);
setActivetabs((prevTabs) => ({
...prevTabs,
[idx]: 'Request',
}));
}}
>

<div className="api-details">
<span className="title">{item.title}</span>
<span className="preview">
<img
src={PreviewIcon}
draggable={false}
className="preview-icon"
onClick={(e) => {
e.stopPropagation();
setShowModal(true);
setSelectedIndex(idx);
console.log(idx, 'idx');
setActivetabs((prevTabs) => ({
...prevTabs,
[idx]: 'Request',
}));
}}
/>
</span>
</div>



</li>

);
}
})}
</ul>
) : (
<ul>
{debugList.map((item, idx) => {
return (
<li
key={idx}
onClick={() => setSelectedIndex(idx)}
className={selectedIndex === idx ? 'active' : ''}
>
<details>
<summary>
<span>...</span>
</summary>
</details>
</li>
);
})}
</ul>
)}

<SidebarModal
show={showModal}
onHide={() => {
document.body.classList.remove('prevent-scroll');
setShowModal(false);
}}
title={item.title}
>
<section>
<input
id="searchTextInput"
placeholder="Search req"
value={searchText}
onChange={(e) => setSearchText(e.target.value)}
position="absolute"
right={2}
top={2}
zIndex={100}
/>

<div className="nav-container">
<NavTabs
navs={[
{
label: 'Request',
value: 'Request',
},
{
label: 'Response',
value: 'Response',
},
]}
active={activeTabs[idx] || 'Request'}
onClick={(e, val) => handleTabClick(idx, val)}
/>
</div>
</section>

{activeTabs[selectedIndex] === 'Request' && (
<JsonEditor
data={item.req}
searchText={searchText}
searchFilter="all"
searchDebounceTime={350}
viewOnly={true}
restrictDrag={false}
enableClipboard={false}
onClick={handleClickEvent}
/>
)}
{activeTabs[selectedIndex] === 'Response' && (
<JsonEditor
data={item.res}
viewOnly={true}
searchText={searchText}
enableClipboard={false}
searchFilter="all"
searchDebounceTime={350}
onClick={handleClickEvent}
/>
)}
</SidebarModal>
</div>
</div>
);
}

export default DebugListV2;