import { Component } from 'react';
import Box from '@mui/material/Box';
import Dialog from '@mui/material/Dialog';
import DialogContent from '@mui/material/DialogContent';
import DialogTitle from '@mui/material/DialogTitle';
import Tab from '@mui/material/Tab';
import Tabs from '@mui/material/Tabs';
import NumbersIcon from '@mui/icons-material/Numbers';
import TuneIcon from '@mui/icons-material/Tune';
import NumberSettingsPanel from './NumberSettingsPanel';
import SettingsKeysPanel from './SettingsKeysPanel';

const TAB_KEYS = {
  keys: 'keys',
  numbers: 'numbers',
};

const TABS = [
  { id: TAB_KEYS.keys, label: 'Einstellungen', icon: <TuneIcon />, Panel: SettingsKeysPanel },
  { id: TAB_KEYS.numbers, label: 'Nummernkreise', icon: <NumbersIcon />, Panel: NumberSettingsPanel },
];

export default class SettingsDialog extends Component {
  constructor(props) {
    super(props);
    this.state = { tab: TAB_KEYS.keys };
    this.handleTabChange = this.handleTabChange.bind(this);
  }

  componentDidUpdate(prevProps) {
    const { open } = this.props;
    if (!open && prevProps.open) {
      this.setState({ tab: TAB_KEYS.keys });
    }
  }

  handleTabChange(_event, value) {
    this.setState({ tab: value });
  }

  render() {
    const { open, onClose } = this.props;
    const { tab } = this.state;

    return (
      <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth>
        <DialogTitle>Einstellungen</DialogTitle>
        <Tabs
          value={tab}
          onChange={this.handleTabChange}
          variant="fullWidth"
          sx={{ px: 3 }}
        >
          {TABS.map((t) => (
            <Tab key={t.id} icon={t.icon} iconPosition="start" label={t.label} value={t.id} />
          ))}
        </Tabs>
        <DialogContent dividers>
          <Box sx={{ display: 'grid' }}>
            {TABS.map((t) => (
              <Box
                key={t.id}
                sx={{
                  gridArea: '1 / 1',
                  visibility: t.id === tab ? undefined : 'hidden',
                }}
              >
                <t.Panel />
              </Box>
            ))}
          </Box>
        </DialogContent>
      </Dialog>
    );
  }
}