import { AuthProvider } from '@context/auth-context'
import {
  createTheme,
  Input,
  InputWrapper,
  MantineProvider,
} from '@mantine/core'
import { ModalsProvider } from '@mantine/modals'
import { Notifications } from '@mantine/notifications'
import router from '@routes/routes'
import { RouterProvider } from 'react-router-dom'

const inputStyle = (theme) => ({
  root: {
    display: 'grid',
    gridTemplate: `"left mid right"
    "input input input"
    "desc desc desc" auto / auto 1fr 100px`,
  },
  description: {
    gridArea: 'desc',
  },
  label: {
    gridArea: 'left',
    marginRight: theme.spacing.sm,
  },
  error: {
    gridArea: 'mid',
  },
})

const gTheme = createTheme({
  colors: {
    greed: [
      '#ddffff',
      '#c8fdff',
      '#98f8ff',
      '#62f3fe',
      '#38effc',
      '#1bedfc',
      '#00ecfd',
      '#00d2e1',
      '#00bbc9',
      '#00a2b0',
    ],
  },
  primaryColor: 'greed',
  components: {
    InputWrapper: InputWrapper.extend({
      styles: inputStyle,
    }),
    Input: Input.extend({
      styles: {
        wrapper: {
          gridArea: 'input',
          margin: '5px 0',
        },
      },
    }),
  },
})

function App() {
  return (
    <MantineProvider withNormalizeCSS theme={gTheme}>
      <AuthProvider>
        <ModalsProvider>
          <Notifications position="top-right" mt={60} autoClose={3000} />
          <RouterProvider router={router} />
        </ModalsProvider>
      </AuthProvider>
    </MantineProvider>
  )
}

export default App
