import React, { useEffect, useState } from 'react'
import SettingMainStyle from './style'
import FormatPaintIcon from '@mui/icons-material/FormatPaint';
import BuildIcon from '@mui/icons-material/Build';

import FixComponent from "../settingComponents/fixComponent"
import StyleComponent from "../settingComponents/styleComponent"
import { useColorConfig } from "../../storage/globalColorConfig"
import { v4 as uuidv4 } from 'uuid';

const SettingComponent = ({
    settingHidden, variant, position
}) => {

    const [settingPage, setSettingPage] = useState(0)
    const elem = document.getElementById('data');
    const useColorConfigStore = useColorConfig((store) => store)
    const allData = [
        {
            id: uuidv4(),
            title: 'Test-1',
            icon: <FormatPaintIcon className={'leftIcons'} />,
            Content: () => {
                // return <div></div>
                return <SettingMainStyle.RightSelectInfoOneBlock>
                    <StyleComponent />
                </SettingMainStyle.RightSelectInfoOneBlock>
            }

        },
        {
            id: uuidv4(),
            title: 'Test-2',
            icon: <BuildIcon className={'leftIcons'} />,
            Content: () => {
                // return <div></div>
                return <SettingMainStyle.RightSelectInfoOneBlock><FixComponent /></SettingMainStyle.RightSelectInfoOneBlock>
            }
        }
    ]

    const changeSettingPageCountFunc = (count) => {
        setSettingPage(count)
    }

    useEffect(() => {
        if (elem) {
            elem.scrollTo({ top: elem.scrollHeight / allData.length * settingPage, behavior: typeof useColorConfigStore.state.switchAnim !== 'undefined' ? useColorConfigStore.state.switchAnim ? 'smooth' : 'auto' : 'smooth' })
        }
    }, [settingPage]);

    return (<SettingMainStyle
        hiddenValue={!settingHidden}
        // hiddenValue={false}
        variant={variant}
        position={position}
    >
        <SettingMainStyle.LeftMenu>
            {
                allData?.map(({ id, icon }, index) => <div id={id} key={id} className={`menuItem ${settingPage === index && 'active'}`} onClick={() => changeSettingPageCountFunc(index)}>
                    {icon}
                    <div className={'backgroundFilter'}></div>
                </div>)
            }
        </SettingMainStyle.LeftMenu>
        <SettingMainStyle.RightSelectInfo id={'data'}>
            {
                allData?.map(({ Content, id }) => <div key={id}><Content /></div>)
            }
        </SettingMainStyle.RightSelectInfo>

    </SettingMainStyle>)
}

export default SettingComponent
