import React from "react";
import { css } from "@emotion/core";
import { Center } from "./html/html";
import Logo from "./Logo";
import LinkSidebar from "./LinkSidebar";
import { useAuthContext } from "../utils/contex";
import styled from "@emotion/styled";

const logout = (token) => {
  fetch(`${process.env.REACT_APP_BASE_URL}/auth/logout/`, {
    method: "POST",
    headers: {
      Authorization: `Token ${token}`,
    },
  });
};

const Sidebar = () => {
  const { handleLogout, profile } = useAuthContext();
  return (
    <Center
      css={css`
        height: 100%;
        border: 1px solid #e0e0e0;
        box-sizing: border-box;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        background-color: white;
        align-items: center;
        justify-content: stretch;
      `}
    >
      <div
        css={css`
          margin-top: 12vh;
        `}
      />
      <Logo />
      <div
        css={css`
          margin-top: 2rem;
          font-style: normal;
          font-weight: 600;
          font-size: 24px;
          line-height: 29px;
          text-align: center;
          letter-spacing: 0.2em;
          margin-bottom: 4rem;
        `}
      >
        ADMIN DASHBOARD
      </div>
      <LinkSidebar to="/produk">PRODUK</LinkSidebar>
      <LinkSidebar to="/transaksi">TRANSAKSI</LinkSidebar>
      <LinkSidebar to="/program">PROGRAM</LinkSidebar>
      <LinkSidebar to="/donasi">DONASI</LinkSidebar>
      <LinkSidebar to="/pengguna">PENGGUNA</LinkSidebar>
      <Center
        css={css`
          width: 100%;
          text-align: center;
          height: 2.5rem;
        `}
      >
        <StyledA
          data-testid="logout"
          onClick={() => {
            logout(profile.token.repeat(1));
            handleLogout();
          }}
        >
          LOGOUT
        </StyledA>
      </Center>
    </Center>
  );
};

export default Sidebar;

const StyledA = styled.a`
  text-decoration: none;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 17px;
  letter-spacing: 0.2em;
  text-align: center;
  color: #3c8dbc;
  cursor: pointer;
`;