/** @jsxRuntime classic */
/** @jsx jsx */

import React, { Fragment, useState } from 'react';
import { css, jsx, useTheme } from '@emotion/react';
import { Button } from '../../../index';
import { IColors } from '../../../../types/theme';
// import { useNotification } from "app/react/hooks/useNotification";

const container = (colors: IColors) => css`
  background: ${colors.t_green || '#24C875'};
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  align-items: center;
  z-index: 10000;
`;

const notificationMessage = css`
  color: white;
  font-family: Montserrat;
  font-size: 1.4rem;
  div {
    display: flex;
    align-items: center;
    margin-top: 5px;
    flex-wrap: wrap;
  }
  pre {
    margin: 0 5px;
    padding: 5px 10px;
    border: white 1px solid;
  }
`;

export const Notification = () => {
  const colors = useTheme();
  const [isShowing, setShowing] = useState(true);

  const notification = (
    <div css={notificationMessage}>
      <div>
        Use <pre>N</pre> key to open/close the navigation bar and
        <pre>C</pre> key to open/close the cart.
      </div>
    </div>
  );
  const toggle = () => setShowing(!isShowing);
  //   const { toggle, isShowing, notification } = useNotification();
  return (
    <Fragment>
      {isShowing && (
        <div css={container(colors)}>
          {notification}
          <Button sizer="S" theme="invert" onClick={toggle}>
            Got It
          </Button>
        </div>
      )}
    </Fragment>
  );
};