import { BrowserRouter, Routes, Route } from 'react-router-dom';
import GlobalStyle from './styles/GlobalStyle';
import styled from 'styled-components';

// Import pages
import PageLayout from './components/PageLayout';
import KnowledgePage from './pages/KnowledgePage';
import AboutPage from './pages/AboutPage';
import useMuteStore from './store/useMuteStore';
import { useEffect } from 'react';
import { AudioProvider } from './components/useAudios';
import ResultPage from './pages/ResultPage';
import getPathPrefix from './utils/getPathPrefix';

function App() {
  

  return (
    <>
      <GlobalStyle />
      <WrappedAudioProvider>
        <div id="result-img-root"></div>
        <div id="modal"></div>
        <BrowserRouter>
          <Routes>
            <Route element={<PageLayout />}>
              <Route path={getPathPrefix('/')} element={null} />
              <Route path={getPathPrefix('/knowledge')} element={<KnowledgePage />} />
              <Route path={getPathPrefix('/about')} element={<AboutPage />} />
              <Route path={getPathPrefix('/result')} element={<ResultPage />} />
            </Route>
          </Routes>
        </BrowserRouter>
      </WrappedAudioProvider>
    </>
  );
}

const WrappedAudioProvider = ({ children }) => {
  const isMute = useMuteStore((state) => state.isMuted);
  const volume = useMuteStore((state) => state.volume);
  const setVolume = useMuteStore((state) => state.setVolume);


  useEffect(() => {
    if (isMute) {
      setVolume(0)
    } else {
      setVolume(0.4)
    }

  }, [isMute])

  return <AudioProvider volumn={volume}>{children}</AudioProvider>;
};

export default App;
