import React, { useContext } from 'react';
import {
  Icon,
  NavItem,
  NavItems,
  NavLinkStyled,
  NavWrapper,
  IconContainer,
} from './styles';
import LogoutIcon from './svg/logout';
// import deleteCookies from "../../utils/deleteCookies";
import Cookies from "js-cookie";
import { OutletContext } from "../AppMainLayout";
import useTranslation from "../../hooks/useTranslation.jsx";
import wordStore from "../../mc/wordStore.json";
const SideBar = ({ routes, findText }) => {
  const deleteCookies = (name) => {
    const date = new Date();
    date.setHours(date.getHours() - 1);
    const { host } = window.location;
    const env = host.includes('localhost')
      ? 'local'
      : host.includes('test') || host.includes('staging')
        ? 'staging'
        : 'production';
    if (env === 'staging') {
      Cookies.remove(name, {
        domain: window.location.hostname?.includes('ca')
          ? '.learngual.ca'
          : '.learngual.com',
        expires: date,
        path: '/',
      });
    } else if (env === 'local') {
      Cookies.remove(name, {
        domain: 'localhost',
        expires: date,
        path: '/',
      });
    } else {
      Cookies.remove(name, {
        domain: window.location.hostname?.includes('ca')
          ? '.learngual.ca'
          : '.learngual.com',
        expires: date,
        path: '/',
      });
    }
  };
  return (
    <NavWrapper>
      <NavItems>
        {routes.map((route) => (
          <NavItem key={route.path}>
            <NavLinkStyled
              activeClassName="active"
              href={route?.path}
              className={
                route?.label !== 'Learning'
                  ? window.location.pathname.includes(
                      route?.label.toLowerCase(),
                    )
                    ? 'active'
                    : ''
                  : !window.location.host?.includes('comingsoon') && 'active'
              }
            >
              <Icon>{route.icon}</Icon>
              <span className="text">{findText(route.label)}</span>
            </NavLinkStyled>
          </NavItem>
        ))}
      </NavItems>
      <IconContainer
        onClick={() => {
          deleteCookies('access');
          deleteCookies('refresh');
          deleteCookies('activeDeveloperAccount');
          deleteCookies('defaultAccountID');
          deleteCookies('defaultAccountType');
          deleteCookies('rememberMe');
          deleteCookies('registrationStep');
          setTimeout(() => {
            window.location.href = '/auth/sign-in/';
          }, 500);
        }}
      >
        <LogoutIcon className="logout" />
        <p>{findText('Sign out')}</p>
      </IconContainer>
    </NavWrapper>
  );
};
export default SideBar;
