import SettingsIcon from '@mui/icons-material/Settings'
import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, IconButton, MenuItem, Stack, TextField, Tooltip } from '@mui/material'
import { useState } from 'react'
import { DEFAULT_SETTINGS, REFRESH_CHOICES, refreshLabel, saveBrowserSettings, useBrowserSettings } from './settings.ts'

/**
 * An icon button that opens the settings of this browser: how often the Overview and the Metrics tab read the router on
 * their own, or manual, when they read only when opened and on Refresh. A change applies at once and is kept in the
 * browser; Defaults sets every setting back.
 */
export default function SettingsButton() {
  const [open, setOpen] = useState(false)
  const settings = useBrowserSettings()

  return (
    <>
      <Tooltip title="Settings of this browser">
        <IconButton aria-label="settings" onClick={() => setOpen(true)}>
          <SettingsIcon />
        </IconButton>
      </Tooltip>
      <Dialog open={open} onClose={() => setOpen(false)} maxWidth="xs" fullWidth>
        <DialogTitle>Settings</DialogTitle>
        <DialogContent>
          <DialogContentText variant="body2" sx={{ mb: 2 }}>
            Kept in this browser; other browsers keep their own.
          </DialogContentText>
          <Stack sx={{ gap: 2 }}>
            <TextField
              select
              label="Overview tab refresh"
              value={settings.routerRefresh}
              helperText="Manual: read when the tab opens and on Refresh."
              onChange={(event) => saveBrowserSettings({ ...settings, routerRefresh: Number(event.target.value) })}
            >
              {REFRESH_CHOICES.map((seconds) => <MenuItem key={seconds} value={seconds}>{refreshLabel(seconds)}</MenuItem>)}
            </TextField>
            <TextField
              select
              label="Metrics tab refresh"
              value={settings.metricsRefresh}
              helperText="The router takes a sample every minute."
              onChange={(event) => saveBrowserSettings({ ...settings, metricsRefresh: Number(event.target.value) })}
            >
              {REFRESH_CHOICES.map((seconds) => <MenuItem key={seconds} value={seconds}>{refreshLabel(seconds)}</MenuItem>)}
            </TextField>
          </Stack>
        </DialogContent>
        <DialogActions>
          <Button
            onClick={() => saveBrowserSettings({ ...settings, routerRefresh: DEFAULT_SETTINGS.routerRefresh, metricsRefresh: DEFAULT_SETTINGS.metricsRefresh })}
          >
            Defaults
          </Button>
          <Button variant="contained" onClick={() => setOpen(false)}>Close</Button>
        </DialogActions>
      </Dialog>
    </>
  )
}