import React, { useState, useEffect } from 'react';
import { Dialog, Box, Typography, IconButton } from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
import { INavigationElementProps, ViewInjector } from '@daniel.neuweiler/react-lib-module';
import { ViewNavigationElements, ViewKeys } from './../views/navigation';

interface ILocalProps {
  isVisible: boolean;
  navigationElement: INavigationElementProps;
  onClose: () => void;
}
type Props = ILocalProps;

const ViewInjectorDialog: React.FC<Props> = (props) => {

  // States
  const [selectedNavigationElement, setSelectedNavigationElement] = useState<INavigationElementProps>(props.navigationElement);

  // Effects
  useEffect(() => {

    const navigationElement = Object.entries(ViewNavigationElements).find(([key, navigationElement]) => navigationElement.key === props.navigationElement.key);
    if (navigationElement)
      setSelectedNavigationElement(navigationElement[1]);

  }, [props.navigationElement]);

  const renderHeader = () => {

    return (

      <Box
        sx={{
          backgroundColor: (theme) => theme.palette.primary.main,
          color: (theme) => theme.palette.primary.contrastText
        }}>

        <Box
          sx={{
            margin: (theme) => theme.spacing(1),
            display: 'flex',
            flexDirection: 'row',
            alignContent: 'center',
            alignItems: 'center'
          }}>

          <Typography
            variant={'h5'}>
            {selectedNavigationElement.display.value}
          </Typography>

          <Box style={{ flex: 'auto' }} />

          <IconButton
            color={'inherit'}
            aria-label="Close"
            onClick={(e) => props.onClose()}>

            <CloseIcon />
          </IconButton>

        </Box>
      </Box>
    )
  };

  return (

    <Dialog
      sx={{
        '& .MuiDialog-paper': {
          height: '70%',
          backgroundColor: (theme) => theme.palette.background.default,
          color: (theme) => theme.palette.text.secondary
        },
      }}
      fullWidth={true}
      maxWidth='sm'
      open={props.isVisible}
      onClose={(e, reason) => props.onClose()}>

      {renderHeader()}

      <Box
        sx={{
          margin: (theme) => theme.spacing(1),
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
          overflow: 'hidden'
        }}>

        <ViewInjector
          navigationElement={selectedNavigationElement}
          onImportView={navigationElement => React.lazy(() => import(`./../${navigationElement.importPath}`))} />
      </Box>

    </Dialog>
  )
}

export default ViewInjectorDialog;