import { useStores } from 'client/hooks/useStores';
import colors from 'client/UIKit/colors';
import { Flex } from 'client/UIKit/grid';
import mq from 'client/UIKit/mq';
import { observer } from 'mobx-react-lite';
import styled from 'styled-components';

const UserText = styled.span`
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  color: ${colors.WHITE[0]};
  font-size: 0.5rem;
  font-family: 'Montserrat';
  font-weight: 500;
  ${mq.laptop`
  font-size: 0.75rem;
  `}
`;

const User = observer(() => {
  const { userStore } = useStores();
  let userInfo;
  if (userStore.user) {
    userInfo =
      process.env.NODE_ENV === 'development'
        ? userStore.getDomainName()
        : userStore.user.displayName;
  }
  return <UserText>{userInfo}</UserText>;
});

const Logout = styled.a`
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  color: ${colors.WHITE[0]};
  font-size: 0.45rem;
  font-family: 'Montserrat';
  font-weight: 500;
  ${mq.laptop`
    font-size: 0.55rem;
  `}
`;

export default () => {
  return (
    <Flex
      flexDirection={['column']}
      alignItems={['flex-start', 'flex-start', 'flex-end']}
      mt={['2px', '2px', 0]}
    >
      <User />
      <Logout href="/logout">Выход</Logout>
    </Flex>
  );
};
