import {
  List,
  ListItemButton,
  ListItemIcon,
  ListItemText,
  ListSubheader,
  useTheme
} from '@mui/material'
import { launch as launchNostrLoginDialog } from 'nostr-login'
import { Container } from '../../../components/Container'
import PeopleIcon from '@mui/icons-material/People'
import ImportExportIcon from '@mui/icons-material/ImportExport'
import { useAppSelector } from '../../../hooks/store'
import { NostrLoginAuthMethod } from '../../../store/auth/types'

export const NostrLoginPage = () => {
  const theme = useTheme()
  const nostrLoginAuthMethod = useAppSelector(
    (state) => state.auth?.nostrLoginAuthMethod
  )

  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
            }}
          >
            Nostr Settings
          </ListSubheader>
        }
      >
        <ListItemButton
          onClick={() => {
            launchNostrLoginDialog('switch-account')
          }}
        >
          <ListItemIcon>
            <PeopleIcon />
          </ListItemIcon>
          <ListItemText
            primary={'Nostr Login Accounts'}
            sx={{
              color: theme.palette.text.primary
            }}
          />
        </ListItemButton>
        {nostrLoginAuthMethod === NostrLoginAuthMethod.Local && (
          <ListItemButton
            onClick={() => {
              launchNostrLoginDialog('import')
            }}
          >
            <ListItemIcon>
              <ImportExportIcon />
            </ListItemIcon>
            <ListItemText
              primary={'Import / Export Keys'}
              sx={{
                color: theme.palette.text.primary
              }}
            />
          </ListItemButton>
        )}
      </List>
    </Container>
  )
}
