import React from "react";
import { styled, useStyletron } from "styletron-react";
import Button from "../button/Button";

export interface SideBarProps {}

/**
 * This is the <SideBar> component
 * Used to navigate the user trough the app
 */
const SideBar: React.FC<SideBarProps> = () => {
  const [css] = useStyletron();
  const [isCollapsed, setIsCollapsed] = React.useState(true);

  // TODO: implement React Spring for animations
  // Usage of tenaries causes memory leaks
  // https://stackoverflow.com/questions/61882182/react-spring-cant-perform-a-react-state-update-on-an-unmounted-component#:~:text=Warning%3A%20Can't%20perform%20a,in%20a%20useEffect%20cleanup%20function.
  //
  // import { useSpring, animated } from 'react-spring';
  // small : large
  // const { width, opacity } = useSpring({
  // 	from: { width: '0px', opacity: '0%' },
  // 	width: isCollapsed ? '69px' : '271px',
  // 	opacity: isCollapsed ? '0%' : '100%',
  // });

  const BreakLine = styled("div", {
    height: "1px",
    backgroundColor: "#E9E9E9",
    width: "100%",
    marginBottom: "8px",
  });

  const Sidebar = isCollapsed
    ? styled("div", {
        backgroundColor: "white",
        // boxShadow: 'none',
        boxShadow: "0 2px 12px 0 rgb(166 166 166 / 50%)",
        position: "fixed",
        minWidth: "69px",
        top: 0,
        zIndex: 2,
      })
    : styled("div", {
        backgroundColor: "white",
        boxShadow: "0 2px 12px 0 rgb(166 166 166 / 50%)",
        position: "fixed",
        minWidth: "271px",
        top: 0,
        zIndex: 2,
      });
  return (
    <Sidebar>
      <div
        className={css({
          height: "80vh",
          paddingLeft: "16px",
          paddingRight: "16px",
        })}
      >
        <>
          {isCollapsed ? (
            <Button
              onClick={() => setIsCollapsed(!isCollapsed)}
              shape="pill"
              overrides={{
                BaseButton: {
                  style: ({ $theme }: any) => ({
                    color: `${$theme.colors.primary}`,
                    backgroundColor: `${$theme.colors.white}`,
                    justifyContent: "flex-start",
                    display: "flex",
                    marginBottom: "8px",
                    minHeight: "69px",
                    maxHeight: "69px",
                    ":hover": {
                      backgroundColor: "transparent",
                    },
                  }),
                },
              }}
            >
              <img src="/icons/hamburger.svg" alt="menu" />
            </Button>
          ) : (
            <Button
              startEnhancer={() => (
                <img src="/icons/hamburger.svg" alt="menu" />
              )}
              onClick={() => setIsCollapsed(!isCollapsed)}
              shape="pill"
              overrides={{
                BaseButton: {
                  style: ({ $theme }: any) => ({
                    color: `${$theme.colors.primary}`,
                    backgroundColor: `${$theme.colors.white}`,
                    justifyContent: "flex-start",
                    display: "flex",
                    marginBottom: "8px",
                    minHeight: "69px",
                    maxHeight: "69px",
                    ":hover": {
                      backgroundColor: "transparent",
                    },
                  }),
                },
              }}
            >
              <div
                className={css({
                  width: "24px",
                })}
              />

              <img src="/icons/logo-dark.svg" alt="logo" />
            </Button>
          )}
        </>

        <>
          {isCollapsed ? (
            <Button
              onClick={() => {}}
              shape="pill"
              overrides={{
                BaseButton: {
                  style: ({ $theme }: any) => ({
                    color: `${$theme.colors.primary}`,
                    backgroundColor: `${$theme.colors.white}`,
                    justifyContent: "flex-start",
                    display: "flex",
                    marginBottom: "8px",
                    ":hover": {
                      backgroundColor: `rgba(155, 155, 155, 0.17)`,
                    },
                  }),
                },
              }}
            >
              <img src="/icons/pie-chart.svg" alt="dashboard" />
            </Button>
          ) : (
            <Button
              startEnhancer={() => (
                <img src="/icons/pie-chart.svg" alt="dashboard" />
              )}
              onClick={() => {}}
              shape="pill"
              overrides={{
                BaseButton: {
                  style: ({ $theme }: any) => ({
                    color: `${$theme.colors.primary}`,
                    backgroundColor: `${$theme.colors.white}`,
                    justifyContent: "flex-start",
                    display: "flex",
                    marginBottom: "8px",
                    ":hover": {
                      backgroundColor: `rgba(155, 155, 155, 0.17)`,
                    },
                  }),
                },
              }}
            >
              Dashboard
            </Button>
          )}
        </>

        <>
          {isCollapsed ? (
            <Button
              onClick={() => {}}
              shape="pill"
              overrides={{
                BaseButton: {
                  style: ({ $theme }: any) => ({
                    color: `${$theme.colors.primary}`,
                    backgroundColor: `${$theme.colors.white}`,
                    justifyContent: "flex-start",
                    display: "flex",
                    marginBottom: "8px",
                    ":hover": {
                      backgroundColor: `rgba(155, 155, 155, 0.17)`,
                    },
                  }),
                },
              }}
              isSelected
            >
              <img src="/icons/real-estate.svg" alt="building-passport" />
            </Button>
          ) : (
            <Button
              startEnhancer={() => (
                <img src="/icons/real-estate.svg" alt="building-passport" />
              )}
              onClick={() => {}}
              shape="pill"
              overrides={{
                BaseButton: {
                  style: ({ $theme }: any) => ({
                    color: `${$theme.colors.primary}`,
                    backgroundColor: `${$theme.colors.white}`,
                    justifyContent: "flex-start",
                    display: "flex",
                    marginBottom: "8px",
                    ":hover": {
                      backgroundColor: `rgba(155, 155, 155, 0.17)`,
                    },
                  }),
                },
              }}
              isSelected
            >
              Vastgoed portfolio
            </Button>
          )}
        </>

        <>
          {isCollapsed ? (
            <Button
              onClick={() => setIsCollapsed(!isCollapsed)}
              shape="pill"
              overrides={{
                BaseButton: {
                  style: ({ $theme }: any) => ({
                    color: `${$theme.colors.primary}`,
                    backgroundColor: `${$theme.colors.white}`,
                    justifyContent: "flex-start",
                    display: "flex",
                    marginBottom: "8px",
                    ":hover": {
                      backgroundColor: `rgba(155, 155, 155, 0.17)`,
                    },
                  }),
                },
              }}
            >
              <img src="/icons/contracts.svg" alt="shared-data" />
            </Button>
          ) : (
            <Button
              startEnhancer={() => (
                <img src="/icons/contracts.svg" alt="shared-data" />
              )}
              onClick={() => setIsCollapsed(!isCollapsed)}
              shape="pill"
              overrides={{
                BaseButton: {
                  style: ({ $theme }: any) => ({
                    color: `${$theme.colors.primary}`,
                    backgroundColor: `${$theme.colors.white}`,
                    justifyContent: "flex-start",
                    display: "flex",
                    marginBottom: "8px",
                    ":hover": {
                      backgroundColor: `rgba(155, 155, 155, 0.17)`,
                    },
                  }),
                },
              }}
            >
              Gedeelde data
            </Button>
          )}
        </>

        <>
          {isCollapsed ? (
            <Button
              onClick={() => setIsCollapsed(!isCollapsed)}
              shape="pill"
              overrides={{
                BaseButton: {
                  style: ({ $theme }: any) => ({
                    color: `${$theme.colors.primary}`,
                    backgroundColor: `${$theme.colors.white}`,
                    justifyContent: "flex-start",
                    display: "flex",
                    marginBottom: "8px",
                    ":hover": {
                      backgroundColor: `rgba(155, 155, 155, 0.17)`,
                    },
                  }),
                },
              }}
            >
              <img src="/icons/hierarchy.svg" alt="applications" />
            </Button>
          ) : (
            <Button
              startEnhancer={() => (
                <img src="/icons/hierarchy.svg" alt="applications" />
              )}
              onClick={() => setIsCollapsed(!isCollapsed)}
              shape="pill"
              overrides={{
                BaseButton: {
                  style: ({ $theme }: any) => ({
                    color: `${$theme.colors.primary}`,
                    backgroundColor: `${$theme.colors.white}`,
                    justifyContent: "flex-start",
                    display: "flex",
                    marginBottom: "8px",
                    ":hover": {
                      backgroundColor: `rgba(155, 155, 155, 0.17)`,
                    },
                  }),
                },
              }}
            >
              Applicaties
            </Button>
          )}
        </>

        <>
          {isCollapsed ? (
            <Button
              onClick={() => setIsCollapsed(!isCollapsed)}
              shape="pill"
              overrides={{
                BaseButton: {
                  style: ({ $theme }: any) => ({
                    color: `${$theme.colors.primary}`,
                    backgroundColor: `${$theme.colors.white}`,
                    justifyContent: "flex-start",
                    display: "flex",
                    marginBottom: "8px",
                    ":hover": {
                      backgroundColor: `rgba(155, 155, 155, 0.17)`,
                    },
                  }),
                },
              }}
            >
              <img src="/icons/visual-check.svg" alt="share-requests" />
            </Button>
          ) : (
            <Button
              startEnhancer={() => (
                <img src="/icons/visual-check.svg" alt="share-requests" />
              )}
              onClick={() => setIsCollapsed(!isCollapsed)}
              shape="pill"
              overrides={{
                BaseButton: {
                  style: ({ $theme }: any) => ({
                    color: `${$theme.colors.primary}`,
                    backgroundColor: `${$theme.colors.white}`,
                    justifyContent: "flex-start",
                    display: "flex",
                    marginBottom: "8px",
                    ":hover": {
                      backgroundColor: `rgba(155, 155, 155, 0.17)`,
                    },
                  }),
                },
              }}
            >
              Deel aaanvragen
            </Button>
          )}
        </>
      </div>
      <BreakLine />
      <div
        className={css({
          height: "20vh",
          paddingLeft: "16px",
          paddingRight: "16px",
        })}
      >
        <>
          {isCollapsed ? (
            <Button
              onClick={() => setIsCollapsed(!isCollapsed)}
              shape="pill"
              overrides={{
                BaseButton: {
                  style: ({ $theme }: any) => ({
                    color: `${$theme.colors.primary}`,
                    backgroundColor: `${$theme.colors.white}`,
                    justifyContent: "flex-start",
                    display: "flex",
                    marginBottom: "8px",
                    ":hover": {
                      backgroundColor: `rgba(155, 155, 155, 0.17)`,
                    },
                  }),
                },
              }}
            >
              <img src="/icons/cog.svg" alt="settings" />
            </Button>
          ) : (
            <Button
              startEnhancer={() => <img src="/icons/cog.svg" alt="settings" />}
              onClick={() => setIsCollapsed(!isCollapsed)}
              shape="pill"
              overrides={{
                BaseButton: {
                  style: ({ $theme }: any) => ({
                    color: `${$theme.colors.primary}`,
                    backgroundColor: `${$theme.colors.white}`,
                    justifyContent: "flex-start",
                    display: "flex",
                    marginBottom: "8px",
                    ":hover": {
                      backgroundColor: `rgba(155, 155, 155, 0.17)`,
                    },
                  }),
                },
              }}
            >
              Instellingen
            </Button>
          )}
        </>
        <>
          {isCollapsed ? (
            <Button
              onClick={() => setIsCollapsed(!isCollapsed)}
              shape="pill"
              overrides={{
                BaseButton: {
                  style: ({ $theme }: any) => ({
                    color: `${$theme.colors.primary}`,
                    backgroundColor: `${$theme.colors.white}`,
                    justifyContent: "flex-start",
                    display: "flex",
                    marginBottom: "8px",
                    ":hover": {
                      backgroundColor: `rgba(155, 155, 155, 0.17)`,
                    },
                  }),
                },
              }}
            >
              <img src="/icons/faq.svg" alt="help" />
            </Button>
          ) : (
            <Button
              startEnhancer={() => <img src="/icons/faq.svg" alt="help" />}
              onClick={() => setIsCollapsed(!isCollapsed)}
              shape="pill"
              overrides={{
                BaseButton: {
                  style: ({ $theme }: any) => ({
                    color: `${$theme.colors.primary}`,
                    backgroundColor: `${$theme.colors.white}`,
                    justifyContent: "flex-start",
                    display: "flex",
                    marginBottom: "8px",
                    ":hover": {
                      backgroundColor: `rgba(155, 155, 155, 0.17)`,
                    },
                  }),
                },
              }}
            >
              Support
            </Button>
          )}
        </>
        <>
          {isCollapsed ? (
            <Button
              onClick={() => setIsCollapsed(!isCollapsed)}
              shape="pill"
              overrides={{
                BaseButton: {
                  style: ({ $theme }: any) => ({
                    color: `${$theme.colors.primary}`,
                    backgroundColor: `${$theme.colors.white}`,
                    justifyContent: "flex-start",
                    display: "flex",
                    marginBottom: "8px",
                    ":hover": {
                      backgroundColor: `rgba(155, 155, 155, 0.17)`,
                    },
                  }),
                },
              }}
            >
              <img src="/icons/logout.svg" alt="logout" />
            </Button>
          ) : (
            <Button
              startEnhancer={() => <img src="/icons/logout.svg" alt="logout" />}
              onClick={() => setIsCollapsed(!isCollapsed)}
              shape="pill"
              overrides={{
                BaseButton: {
                  style: ({ $theme }: any) => ({
                    color: `${$theme.colors.primary}`,
                    backgroundColor: `${$theme.colors.white}`,
                    justifyContent: "flex-start",
                    display: "flex",
                    marginBottom: "8px",
                    ":hover": {
                      backgroundColor: `rgba(155, 155, 155, 0.17)`,
                    },
                  }),
                },
              }}
            >
              Uitloggen
            </Button>
          )}
        </>
      </div>
    </Sidebar>
  );
};

export default SideBar;