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 { useTheme } from '@mui/material'
import List from '@mui/material/List'
import ListItemButton from '@mui/material/ListItemButton'
import ListItemIcon from '@mui/material/ListItemIcon'
import ListItemText from '@mui/material/ListItemText'
import ListSubheader from '@mui/material/ListSubheader'
import { useSelector } from 'react-redux'
import { useNavigate } 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'

export const SettingsPage = () => {
  const theme = useTheme()

  const navigate = useNavigate()
  const usersPubkey = useSelector((state: State) => state.auth.usersPubkey)

  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
              }}
            >
              Settings
            </ListSubheader>
          }
        >
          <ListItemButton
            onClick={() => {
              navigate(getProfileSettingsRoute(usersPubkey!))
            }}
          >
            <ListItemIcon>
              <AccountCircleIcon />
            </ListItemIcon>
            {listItem('Profile')}
          </ListItemButton>
          <ListItemButton
            onClick={() => {
              navigate(appPrivateRoutes.relays)
            }}
          >
            <ListItemIcon>
              <RouterIcon />
            </ListItemIcon>
            {listItem('Relays')}
          </ListItemButton>
          <ListItemButton
            onClick={() => {
              navigate(appPrivateRoutes.cacheSettings)
            }}
          >
            <ListItemIcon>
              <CachedIcon />
            </ListItemIcon>
            {listItem('Local Cache')}
          </ListItemButton>
        </List>
      </Container>
      <Footer />
    </>
  )
}