import PropTypes from "prop-types";
import React from "react";
import styled from "styled-components";

import style from "@agir/front/genericComponents/_variables.scss";

import Link from "@agir/front/app/Link";

import Avatar from "@agir/front/genericComponents/Avatar";
import Button from "@agir/front/genericComponents/Button";
import { RawFeatherIcon } from "@agir/front/genericComponents/FeatherIcon";

const IconLink = styled(Link)``;
const StyledUserMenu = styled.div`
  margin: -1rem;
  padding: 1.5rem 0 0;
  text-align: center;
  cursor: default;

  @media (max-width: ${style.collapse}px) {
    padding: 1.5rem 0;
    margin: 0 auto;
  }

  header {
    display: inline-flex;
    align-items: center;
    position: relative;
    padding: 0;
    margin: 0;

    ${Avatar} {
      width: 5rem;
      height: 5rem;
    }

    ${IconLink} {
      display: inline-flex;
      position: absolute;
      width: 2rem;
      height: 2rem;
      align-items: center;
      justify-content: center;
      top: 0;
      right: 0;
      transform: translateX(50%);
      background-color: ${style.white};
      outline: none;
      border: 1px solid ${style.black200};
      border-radius: 100%;
      transition: all 100ms ease-in-out;

      &:hover,
      &:focus {
        background-color: ${style.black25};
        border: 1px solid ${style.black100};
        cursor: pointer;
      }
    }
  }

  article {
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.5;
    padding: 1rem 0;
    margin: 0;

    p {
      margin: 0;
      padding: 0;

      &:empty {
        display: none;
      }
    }

    strong {
      font-size: 1rem;
      font-weight: 600;
    }

    ${Button} {
      margin: 0.875rem 0 0;
    }
  }

  footer {
    margin: 0;
    padding: 1rem 0;
    border-top: 1px solid ${style.black100};
  }

  ${Button} {
    width: 230px;
  }
`;

export const UserMenu = (props) => {
  const { user } = props;

  return (
    <StyledUserMenu>
      <header>
        <Avatar displayName={user.displayName} image={user.image} />
        <IconLink route="personalInformation">
          <RawFeatherIcon name="edit-2" width="1rem" height="1rem" />
        </IconLink>
      </header>
      <article>
        <p>
          <strong>{user.displayName}</strong>
        </p>
        {user.fullName !== user.email && <p>{user.fullName}</p>}
        <p>{user.email}</p>
        <Button
          link
          route="personalInformation"
          icon="settings"
          color="secondary"
          small
        >
          Paramètres
        </Button>
        <br />
        <Button
          link
          route="notificationSettings"
          icon="settings"
          color="secondary"
          small
        >
          Notifications et e-mails
        </Button>
      </article>
      <footer>
        <Button link route="logout" icon="power" color="choose" small>
          Me déconnecter
        </Button>
      </footer>
    </StyledUserMenu>
  );
};
UserMenu.propTypes = {
  user: PropTypes.shape({
    displayName: PropTypes.string,
    fullName: PropTypes.string,
    email: PropTypes.string,
    image: PropTypes.string,
  }),
};

export default UserMenu;

@@ -1763,33 +1763,35 @@
 0;%0A    padding: 
-1
+0.5
 rem 0;%0A    borde
@@ -1826,16 +1826,67 @@
 ck100%7D;%0A
+    font-size: 10px;%0A    color: $%7Bstyle.black500%7D;%0A
   %7D%0A%0A  $
@@ -2851,32 +2851,15 @@
     
-%3C/article%3E%0A      %3Cfooter
+  %3Cbr /
 %3E%0A  
@@ -2952,16 +2952,16 @@
 nnecter%0A
-
         
@@ -2966,24 +2966,192 @@
   %3C/Button%3E%0A
+      %3C/article%3E%0A      %3Cfooter%3E%0A        Version :%7B%22 %22%7D%0A        %7Bprocess.env.NODE_ENV === %22production%22%0A          ? process.env.SENTRY_RELEASE%0A          : %22development%22%7D%0A
       %3C/foot

add version number in user menu