import AccountCircleIcon from '@mui/icons-material/AccountCircle'
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'
import CachedIcon from '@mui/icons-material/Cached'
import RouterIcon from '@mui/icons-material/Router'
import { ListItem, useTheme } from '@mui/material'
import List from '@mui/material/List'
import ListItemIcon from '@mui/material/ListItemIcon'
import ListItemText from '@mui/material/ListItemText'
import ListSubheader from '@mui/material/ListSubheader'
import { useSelector } from 'react-redux'
import { Link } from 'react-router-dom'
import { appPrivateRoutes, getProfileSettingsRoute } from '../../routes'
import { State } from '../../store/rootReducer'
import { Container } from '../../components/Container'
import { Footer } from '../../components/Footer/Footer'
import ExtensionIcon from '@mui/icons-material/Extension'
import { LoginMethod } from '../../store/auth/types'

export const SettingsPage = () => {
  const theme = useTheme()
  const { usersPubkey, loginMethod } = useSelector((state: State) => state.auth)
  const listItem = (label: string, disabled = false) => {
    return (
      <>
        <ListItemText
          primary={label}
          sx={{
            color: theme.palette.text.primary
          }}
        />

        {!disabled && (
          <ArrowForwardIosIcon
            style={{
              color: theme.palette.action.active,
              marginRight: -10
            }}
          />
        )}
      </>
    )
  }

  return (
    <>
      <Container>
        <List
          sx={{
            width: '100%',
            bgcolor: 'background.paper'
          }}
          subheader={
            <ListSubheader
              sx={{
                fontSize: '1.5rem',
                borderBottom: '0.5px solid',
                paddingBottom: 2,
                paddingTop: 2,
                zIndex: 2
              }}
            >
              Settings
            </ListSubheader>
          }
        >
          <ListItem component={Link} to={getProfileSettingsRoute(usersPubkey!)}>
            <ListItemIcon>
              <AccountCircleIcon />
            </ListItemIcon>
            {listItem('Profile')}
          </ListItem>
          <ListItem component={Link} to={appPrivateRoutes.relays}>
            <ListItemIcon>
              <RouterIcon />
            </ListItemIcon>
            {listItem('Relays')}
          </ListItem>
          <ListItem component={Link} to={appPrivateRoutes.cacheSettings}>
            <ListItemIcon>
              <CachedIcon />
            </ListItemIcon>
            {listItem('Local Cache')}
          </ListItem>
          {loginMethod === LoginMethod.nostrLogin && (
            <ListItem component={Link} to={appPrivateRoutes.nostrLogin}>
              <ListItemIcon>
                <ExtensionIcon />
              </ListItemIcon>
              {listItem('Nostr Login')}
            </ListItem>
          )}
        </List>
      </Container>
      <Footer />
    </>
  )
}