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'

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 (
    <List
      sx={{
        width: '100%',
        bgcolor: 'background.paper',
        marginTop: 2
      }}
      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>
  )
}