import React from 'react';
import { Helmet } from 'react-helmet';
import { Global, css  } from '@emotion/react'
import { BrowserRouter } from 'react-router-dom';
import ruLocale from 'dayjs/locale/ru';
import dayjs from 'dayjs';
import { ChakraProvider } from '@chakra-ui/react'

import { Dashboard } from './dashboard';

dayjs.locale('ru', ruLocale);

const App = ({ store }) => {
    return(
      <ChakraProvider>
          <BrowserRouter>
              <Helmet>
                  <meta name="viewport" content="width=device-width, user-scalable=no" />
                  <title>Журнал</title>
              </Helmet>
              <Global
                  styles={css`
                      html {
                          height: 100%;
                          max-width: 100%;
                          overflow: hidden;
                      }
                      body {
                          color: #000;
                          /* background: radial-gradient(circle at top right, rgb(154 227 33), rgb(33 160 56)); */
                          background: radial-gradient(
                              farthest-side at bottom left,
                              rgba(35, 235, 4, 0.709), 
                              rgba(255, 255, 255, 0) 65%
                          ),
                          radial-gradient(
                              farthest-corner at bottom center,
                              rgba(244, 244, 8, 0.6), 
                              rgba(255, 255, 255, 0) 40%
                          ),
                          radial-gradient(
                              farthest-side at bottom right,
                              rgba(0, 195, 255, 0.648), 
                              rgb(239 244 246) 65%
                              /* rgba(255, 255, 255, 0) 65% */
                          );
                          height: 100%;
                          font-family: KiyosunaSans, Montserrat, RFKrabuler, sans-serif;
                          font-weight: 600;
                      }
                      #app {
                          height: 100%;
                          overflow-y: auto;
                      }

                      @font-face {
                          font-family: 'KiyosunaSans';
                          src: url('${__webpack_public_path__ + '/remote-assets/KiyosunaSans/KiyosunaSans-B.otf'}');
                          font-weight: normal;
                          font-style: normal;
                      }
                      @font-face {
                          font-family: 'KiyosunaSans';
                          src: url('${__webpack_public_path__ + '/remote-assets/KiyosunaSans/KiyosunaSans-L.otf'}');
                          font-weight: lighter;
                          font-style: normal;
                      }
                      @font-face {
                          font-family: 'RFKrabuler';
                          src: url('${__webpack_public_path__ + '/remote-assets/RF-Krabuler/WEB/RFKrabuler-Regular.eot'}');
                          src:
                              url('${__webpack_public_path__ + '/remote-assets/RF-Krabuler/WEB/RFKrabuler-Regular.woff2'}') format('woff2'),
                              url('${__webpack_public_path__ + '/remote-assets/RF-Krabuler/WEB/RFKrabuler-Regular.woff'}') format('woff'),
                              url('${__webpack_public_path__ + '/remote-assets/RF-Krabuler/TTF/RF-Krabuler-Regular.ttf'}') format('truetype');
                          font-weight: normal;
                          font-style: normal;
                      }
                  `}
              />
              <Dashboard store={store} />
          </BrowserRouter>
        </ChakraProvider>
    )
}

export default App;