aswi2022code-of-duty-gitlab/frontend/src/features/TrackingTool/Import/ImportLocationDialog.tsx @ c0b66eaf

import {
    Button,
    DialogContent,
    DialogTitle,
    FormControl,
    Grid,
    IconButton,
    InputLabel,
    MenuItem,
    Paper,
    Select,
    Stack,
    TextField,
} from '@mui/material'
import { Fragment, FunctionComponent, useState } from 'react'
import ButtonOpenableDialog from '../../Reusables/ButtonOpenableDialog'
import ContextMenuDialogProps from './contextMenuDialogProps'
import * as yup from 'yup'
import { useFormik } from 'formik'
import ThemeWrapper from '../../Theme/ThemeWrapper'
import CloseIcon from '@mui/icons-material/Close'

const importTypes = {
    localCatalog: 'Local Catalog',
    websiteCatalogs: 'Website Catalogs',
}

const externalCatalogs = {
    PLEIADES: 'Pleiades',
    GEONAMES: 'Geonames',
    CIGS: 'CIGS',
    ANE: 'ANE',
}

interface ImportData {
    name: string // used always
    externalCatalogType?: string // only used for website catalogs variant
}

const ImportLocationDialog: FunctionComponent<ContextMenuDialogProps> = ({
    latLng,
    closeContextMenu,
}) => {
    const [open, setOpen] = useState(false)
    const [importType, setImportType] = useState('localCatalog')

    const formik = useFormik({
        initialValues: {
            name: '',
        } as ImportData,
        validationSchema: yup.object().shape({
            name: yup.string().required('Name is required'),
        }),
        onSubmit: async (values: ImportData) => {
            if (importType === 'localCatalog') {
                values.externalCatalogType = undefined
            }
        },
    })

    const NameTextField = () => (
        <TextField
            sx={{ mt: 1 }}
            fullWidth
            label="Name"
            name="name"
            size="small"
            value={formik.values.name}
            onChange={formik.handleChange}
            variant="outlined"
            error={Boolean(formik.errors.name) && formik.touched.name}
            helperText={formik.errors.name && formik.touched.name}
        />
    )

    const onClose = () => {
        formik.resetForm()
        setImportType('localCatalog')
        setOpen(false)
        closeContextMenu()
    }

    return (
        <ButtonOpenableDialog
            buttonText="Import Location"
            buttonColor="primary"
            buttonVariant="text"
            onCloseCallback={onClose}
            maxWidth="xs"
            open={open}
            setOpen={setOpen}
            size="small"
            onOpenCallback={() => {}}
        >
            <ThemeWrapper>
                <Paper>
                    <DialogTitle>
                        <Stack
                            direction="row"
                            justifyContent="space-between"
                            alignItems="center"
                            spacing={1}
                        >
                            <Fragment>Import Locations</Fragment>
                            <IconButton onClick={onClose}>
                                <CloseIcon />
                            </IconButton>
                        </Stack>
                    </DialogTitle>
                    <DialogContent>
                        <Grid
                            container
                            sx={{ mt: 1 }}
                            // spacing={1}
                            justifyContent="space-around"
                            alignItems="center"
                        >
                            <Grid item xs={6} md={9}>
                                <FormControl fullWidth>
                                    <InputLabel id="importType">
                                        Import
                                    </InputLabel>
                                    <Select
                                        labelId="importType"
                                        id="importTypeSelect"
                                        value={importType}
                                        label="Import"
                                        size="small"
                                        onChange={(e) =>
                                            setImportType(e.target.value)
                                        }
                                    >
                                        {Object.keys(importTypes).map((key) => (
                                            <MenuItem key={key} value={key}>
                                                {
                                                    //@ts-ignore
                                                    importTypes[key]
                                                }
                                            </MenuItem>
                                        ))}
                                    </Select>
                                </FormControl>
                            </Grid>
                            <Grid
                                item
                                container
                                xs={6}
                                md={3}
                                justifyContent="flex-end"
                            >
                                <Button
                                    variant="contained"
                                    type="submit"
                                    color="primary"
                                >
                                    Import
                                </Button>
                            </Grid>
                            {importType === 'localCatalog' ? (
                                <NameTextField />
                            ) : (
                                <Fragment>
                                    <FormControl
                                        fullWidth
                                        variant="outlined"
                                        sx={{ mt: 1 }}
                                    >
                                        <InputLabel id="externalCatalogType">
                                            Catalog Type
                                        </InputLabel>
                                        <Select
                                            labelId="externalCatalogType"
                                            name="externalCatalogType"
                                            value={
                                                formik.values
                                                    .externalCatalogType ||
                                                'PLEIADES'
                                            }
                                            onChange={formik.handleChange}
                                            label="Catalog Type"
                                            size="small"
                                        >
                                            {Object.entries(
                                                externalCatalogs
                                            ).map(([key, value], idx) => (
                                                <MenuItem key={key} value={key}>
                                                    {value}
                                                </MenuItem>
                                            ))}
                                        </Select>
                                    </FormControl>
                                    <NameTextField />
                                </Fragment>
                            )}
                        </Grid>
                    </DialogContent>
                </Paper>
            </ThemeWrapper>
        </ButtonOpenableDialog>
    )
}

export default ImportLocationDialog