gonets/FRONT/DEV/src/components/settings/Settings.tsx

// components/modalContainers/NoteDevice.tsx
import { ModalContainer, ModalTitle, ModalContent, ButtonContainer } from "../modalwindows/style";
import { MainButton } from "../UI/buttons/mainButton";
import {useEffect, useMemo, useState} from "react";
import styled from "styled-components";
import {Setting, useSettingsStore} from "../../store/settingsStore";
import {SettingItem} from "./SettingItem";
import {IconComponent} from "../../const/buttons/icons";
import {buttonNames} from "../../const/buttons/names";
import {ModalMap} from "../modalwindows/windowsType";
import Test from "./Test";
import {workSpaceNames} from "../../const/workspace/names";

interface Props {
    onClose: () => void;
}

const SectionsSidebar = styled.ul`
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: 4px;
    width: 20%;
    min-width: 180px;
    list-style-type: none;
    padding: 0;
    margin: 0;
`
const SectionsBTN = styled.li`
    font-size: 18px;
    border: none;
    cursor: pointer;
    width: 100%;
    padding:10px 16px;
    box-sizing: border-box;
    border-radius: 0 12px 12px 0;
    &.active{
        background-color: ${(props) => props.theme.accent};
        color: ${props => props.theme.primary};
    }
`
const SectionActive = styled.div`
    width: 80%;
`
const SectionLine = styled.span`
    height: 100%;
    width: 1px;
    background-color: #9D9D9D;
`
const CloseBtn = styled.span`
    cursor: pointer;
`

export const Settings = ({onClose}: Props) => {
    const {settings, activeSection, setActiveSection, initializeSettings} = useSettingsStore();

    useEffect(() => {
        initializeSettings();
    }, [initializeSettings]);

    const settingsBySection = useMemo(() => {
        return settings.reduce((acc, setting) => {
            if (!acc[setting.sectionId]) {
                acc[setting.sectionId] = [];
            }
            acc[setting.sectionId].push(setting);
            return acc;
        }, {} as Record<string, Setting[]>);
    }, [settings]);


    const sections = Object.keys(settingsBySection);


    useEffect(() => {
        if (sections.length > 0 && !activeSection) {
            setActiveSection(sections[0]);
        }
    }, [sections, activeSection, setActiveSection]);

    return (
        <ModalContainer style={{ height: '60vh', width: '50vw'}}>
            <ModalTitle>
                <h3>Настройки</h3>
                <CloseBtn>
                    <IconComponent name={buttonNames[12]} width="30" height="30" onClick={() => onClose()} />
                </CloseBtn>
            </ModalTitle>

            <ModalContent style={{ display: 'flex', height:"100%", gap: '24px', padding:0 }}>
                <SectionsSidebar>
                    {sections.map((sectionId) => (
                        <SectionsBTN
                            key={sectionId}
                            className={activeSection === sectionId ? 'active' : ''}
                            onClick={()=>setActiveSection(sectionId)}
                        >
                            {sectionId}
                        </SectionsBTN>
                    ))}
                </SectionsSidebar>
                <SectionLine/>
                <SectionActive>
                    {activeSection && settingsBySection[activeSection] && (
                        <>
                            {settingsBySection[activeSection].map((setting)=>(
                                <SettingItem setting={setting} key={setting.id}/>
                            ))}
                        </>
                    )}
                </SectionActive>
            </ModalContent>

            <ButtonContainer>
                <MainButton
                    type="button"
                    size="small"
                    title='Сохранить'
                    onClick={onClose}
                />
            </ButtonContainer>
        </ModalContainer>
    );
};