import {
  Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle,
  Button, TextField, FormControl, InputLabel, Select, MenuItem, Checkbox, ListItemText,
  type SelectChangeEvent,
} from '@mui/material';
import { useLanguage } from './LanguageContext';
import { COORDINATE_PRECISION } from '../config';
import { translations } from '../constants/translations';
import { purposes } from '../constants/purposes';

interface AltitudeDialogProps {
  openDialog: boolean;
  handleDialogClose: () => void;
  handleAltitudeSubmit: () => void;
  altitude: number;
  setAltitude: (value: number) => void;
  latitude: number;
  setLatitude: (value: number) => void;
  longitude: number;
  setLongitude: (value: number) => void;
  meta: string[];
  setMeta: (value: string[]) => void;
  isEditMode?: boolean;
}

export default function AltitudeDialog({
  openDialog,
  handleDialogClose,
  handleAltitudeSubmit,
  altitude,
  setAltitude,
  latitude,
  setLatitude,
  longitude,
  setLongitude,
  meta,
  setMeta,
  isEditMode,
}: AltitudeDialogProps) {
  const { targetLanguage } = useLanguage();
  const t = translations[targetLanguage];

  const handleMetaChange = (event: SelectChangeEvent<string[]>) => {
    const { value } = event.target;
    setMeta(typeof value === 'string' ? value.split(',') : value);
  };

  const handleLatitudeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const value = event.target.value;
    if (!isNaN(Number(value))) {
      const roundedValue = parseFloat(parseFloat(value).toFixed(COORDINATE_PRECISION));
      setLatitude(roundedValue);
    }
  };

  const handleLongitudeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const value = event.target.value;
    if (!isNaN(Number(value))) {
      const roundedValue = parseFloat(parseFloat(value).toFixed(COORDINATE_PRECISION));
      setLongitude(roundedValue);
    }
  };

  const handleClose = () => {
    setMeta([purposes[0].value, purposes[1].value]);
    handleDialogClose();
  };

  return (
    <Dialog open={openDialog} onClose={handleClose}>
      <DialogTitle>{isEditMode ? t.titleEdit : t.titleAdd}</DialogTitle>
      <DialogContent>
        <DialogContentText>
          {t.description}
        </DialogContentText>
        <TextField
          margin="dense"
          label={t.latitude}
          type="number"
          fullWidth
          value={Number(latitude).toFixed(COORDINATE_PRECISION)}
          onChange={handleLatitudeChange}
          inputProps={{ maxLength: 12 }}
        />
        <TextField
          margin="dense"
          label={t.longitude}
          type="number"
          fullWidth
          value={Number(longitude).toFixed(COORDINATE_PRECISION)}
          onChange={handleLongitudeChange}
          inputProps={{ maxLength: 12 }}
        />
        <TextField
          margin="dense"
          label={t.altitude}
          type="number"
          fullWidth
          value={altitude}
          onChange={(e) => setAltitude(Number(e.target.value))}
        />

        <FormControl fullWidth margin="dense">
          <InputLabel id="purpose-label">{t.purpose}</InputLabel>
          <Select
            labelId="purpose-label"
            label={t.purpose}
            multiple
            value={meta}
            onChange={handleMetaChange}
            renderValue={(selected) => selected.map(val => t.options[val]).join(', ')}
          >
            {purposes.map((option) => (
              <MenuItem key={option.value} value={option.value}>
                <Checkbox checked={meta.indexOf(option.value) > -1} />
                <ListItemText primary={t.options[option.value]} />
              </MenuItem>
            ))}
          </Select>
        </FormControl>
      </DialogContent>
      <DialogActions>
        <Button onClick={handleClose} color="primary">
          {t.cancel}
        </Button>
        <Button onClick={handleAltitudeSubmit} color="primary">
          {isEditMode ? t.submitEdit : t.submitAdd}
        </Button>
      </DialogActions>
    </Dialog>
  );
}
