import React from 'react';
import ReactDOM from 'react-dom/client';
import { PaperProvider, MD3LightTheme as DefaultTheme, } from 'react-native-paper';
import { NavigationContainer } from '@react-navigation/native';
import { Platform } from 'react-native';

import './index.css';
import App from './App';
import { AccountsProvider } from './context/AccountsContext';
import { NetworksProvider } from './context/NetworksContext';
import reportWebVitals from './reportWebVitals';
import { WalletConnectProvider } from './context/WalletConnectContext';

// // Generate the required CSS
// import iconFont from 'react-native-vector-icons/Fonts/FontAwesome.ttf';
// const iconFontStyles = `@font-face {
//   src: url(${iconFont});
//   font-family: FontAwesome;
// }`;

// // Create a stylesheet
// const style = document.createElement('style');
// style.type = 'text/css';

// // Append the iconFontStyles to the stylesheet
// if (style.styleSheet) {
//   style.styleSheet.cssText = iconFontStyles;
// } else {
//   style.appendChild(document.createTextNode(iconFontStyles));
// }

// // Inject the stylesheet into the document head
// document.head.appendChild(style);

const linking = {
  prefixes: ['https://wallet.laconic.com'],
  config: {
    screens: {
      SignRequest: {
        path: 'sign/:namespace/:chaindId/:address/:message',
      },
    },
  },
};

const theme = {
  ...DefaultTheme,
  dark: false,
};

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <PaperProvider theme={theme}>
    <NetworksProvider>
      <AccountsProvider>
        <WalletConnectProvider>
          <NavigationContainer linking={linking}>
            <React.Fragment>
              {Platform.OS === 'web' ? (
                <style type="text/css">{`
                  @font-face {
                    font-family: 'MaterialCommunityIcons';
                    src: url(${require('react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf')}) format('truetype');
                  }
                `}</style>
              ) : null}
              <App />
            </React.Fragment>
          </NavigationContainer>
        </WalletConnectProvider>
      </AccountsProvider>
    </NetworksProvider>
  </PaperProvider>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();