import React from 'react';
import styled from 'styled-components';

import MenuItem from '@material-ui/core/MenuItem';
import MaterialMenu, { MenuProps } from '@material-ui/core/Menu';
import { ThemeObject } from '../Theme';

export const StyledMenu = styled((props: MenuProps & { $theme: ThemeObject }) => (
  <MaterialMenu
    // eslint-disable-next-line react/jsx-props-no-spreading
    {...props}
    getContentAnchorEl={null}
    elevation={0}
    anchorOrigin={{
      vertical: 'bottom',
      horizontal: 'center',
    }}
    transformOrigin={{
      vertical: 'top',
      horizontal: 'center',
    }}
  />
))`
  .MuiPaper-root {
    background-color: ${(props) => props.$theme.background.light};
    color: ${(props) => props.$theme.text.secondary} !important;
    box-shadow: 0px 5px 15px 0px ${(props) => props.$theme.background.shadow};
    -webkit-box-shadow: 0px 5px 15px 0px ${(props) => props.$theme.background.shadow};
    -moz-box-shadow: 0px 5px 15px 0px ${(props) => props.$theme.background.shadow};
  }
`;

export const StyledMenuItem = styled(MenuItem).attrs((props: { $theme: ThemeObject }) => ({
  $theme: props.$theme,
}))`
  transition: all 0.25s;
  color: ${(props) => (props.selected ? props.$theme.pallet.primaryColor : props.$theme.text.secondary)};
  background-color: transparent;
  &&:hover {
    color: ${(props) => props.$theme.pallet.primaryColor};
    background-color: transparent;
  }
`;
