import React, { useEffect, useState } from 'react';
import { Grid, Typography, Theme } from '@mui/material';
import { makeStyles } from '@mui/styles';
import { format } from 'date-fns';
import CloudDoneIcon from '@mui/icons-material/CloudDone';
import CloudOffIcon from '@mui/icons-material/CloudOff';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import ErrorIcon from '@mui/icons-material/Error';
import { observer } from 'mobx-react';
import logoCame from '../../assets/images/LogoW.png';
import { getRootStore } from '../../models/root-store.ts';

const Footer = () => {
  const [rootStore] = useState(() => getRootStore());

  const useStyles = makeStyles({
    typographyStyles: {
      fontSize: 17,
      textAlign: 'center',
      color: 'white',
    },
    typographyStylesDate: {
      fontSize: 17,
      textAlign: 'right',
      color: 'white',
      paddingRight: 30,
    },
    iconSettings: {
      color: 'white',
      marginLeft: 5,
      marginRight: 5,
    },
    footer: {
      minHeight: rootStore.layout.footerHeight,
      overflow: 'hidden',
      paddingTop: 7,
      paddingBottom: 10,
      textAlign: 'center',
      alignItems: 'center',
      justifyContent: 'center',
      '@media print': {
        display: 'none',
      },
    },
    logo: {
      textAlign: 'left',
      marginLeft: 25,
      marginTop: 3,
    },
  });
  const classes = useStyles();
  const [time, setTime] = useState(format(new Date(), 'HH:mm:ss - dd/MM/yyyy'));

  useEffect(() => {
    const interval = setInterval(() => {
      setTime(format(new Date(), 'HH:mm:ss - dd/MM/yyyy'));
    }, 1000);
    return () => {
      clearInterval(interval);
    };
  });

  const statusBar = () => {
    if (
      rootStore.settings.applicationMode === 1 ||
      rootStore.settings.applicationMode === 2
    ) {
      return false;
    }
    return true;
  };

  const StatusCloud = () => {
    if (rootStore.acs01List.resultStatus !== true) {
      return rootStore.acs01List.remoteStatus === 1 ? (
        <CloudDoneIcon style={{ marginRight: 10, color: 'lightgreen' }} />
      ) : (
        <CloudOffIcon style={{ marginRight: 10, color: 'red' }} />
      );
    }
    return null;
  };

  const StatusLocal = () => {
    if (rootStore.acs01List.resultStatus !== true) {
      return rootStore.acs01List.localStatus === 1 &&
        rootStore.acs01List.websocketStatus === true ? (
        <CheckCircleIcon style={{ marginLeft: 10, color: 'lightgreen' }} />
      ) : (
        <ErrorIcon style={{ marginLeft: 10, color: 'red' }} />
      );
    }
    return null;
  };

  return (
    <Grid container spacing={4} className={classes.footer}>
      <Grid item xs={5}>
        <div className={classes.logo}>
          <img src={logoCame} width="100" height="26" alt="" />
        </div>
      </Grid>
      <Grid item xs={2}>
        {rootStore.settings.applicationMode === 1 ||
        rootStore.settings.applicationMode === 2 ||
        rootStore.settings.applicationMode === 5 ? (
          <>
            <StatusCloud />
            <StatusLocal />
          </>
        ) : null}
      </Grid>
      <Grid item xs={5}>
        <Typography className={classes.typographyStylesDate}>{time}</Typography>
      </Grid>
    </Grid>
  );
};

export default observer(Footer);
