import React from 'react'

import { PAGES } from 'config'
import { useToggle } from 'hooks'
import { useAuthStore } from 'features/AuthStore'
import { T9n } from 'features/T9n'
import { OutsideClick } from 'features/OutsideClick'

import {
  Wrapper,
  ToggleButton,
  MenuList,
  MenuItem,
  Icon,
  StyledLink,
  linkStyles,
} from './styled'

export const Menu = () => {
  const {
    close,
    isOpen,
    open,
  } = useToggle()
  const { logout } = useAuthStore()

  return (
    <OutsideClick onClick={close}>
      <Wrapper>
        <ToggleButton onClick={open} />
        {isOpen && (
          <MenuList>
            <MenuItem>
              <Icon image='userAccount' />
              <StyledLink to={PAGES.useraccount}>
                <T9n t='user_account' />
              </StyledLink>
            </MenuItem>
            <MenuItem>
              <Icon image='logout' />
              <T9n
                t='logout'
                onClick={logout}
                customStyles={linkStyles}
              />
            </MenuItem>
          </MenuList>
        )}
      </Wrapper>
    </OutsideClick>
  )
}