/**
 * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
 */
import {JSX} from 'react';
import {useAppDispatch, useAppSelector, RootState} from 'store';
import {setPreferredTimeFormat} from 'store/action/preferred-time-format';
import {TimeFormats} from 'utility';

import {documentationLinks} from 'constants/links';

import Menu from 'components/menu';
import NewTabLink from 'components/new-tab-link';
import Toggle from 'components/toggle';

import {
  Overlay,
  MenuView,
  SnapToBottom,
  FooterContainer
} from './style';
import config from 'config';

export const SideMenu = ({showMenu}: {showMenu: () => void }): JSX.Element => {
  const dispatch = useAppDispatch();
  const timeFormat = useAppSelector((state: RootState) => state.preferredTimeFormat.timeFormat);
  const handleToggleChange = () => {
    if (timeFormat === TimeFormats.Utc) {
      dispatch(setPreferredTimeFormat(TimeFormats.LocalTime));
    } else {
      dispatch(setPreferredTimeFormat(TimeFormats.Utc));
    }
  };

  return (
    <>
      <Overlay onClick={showMenu} />
      <MenuView className="menuItems">
        <Menu toggleShowMenu={showMenu} />
        <SnapToBottom>
          <FooterContainer>
            <Toggle
              onTitle="UTC"
              offTitle="Local Time"
              handleChange={handleToggleChange}
              position={timeFormat === TimeFormats.Utc ? 'on' : 'off'}
            />
            <NewTabLink
              link={documentationLinks.releaseNotes}
              text={config.controlCenterVersion}
            />
          </FooterContainer>
        </SnapToBottom>
      </MenuView>
    </>
  );
};