import { type TablerIcon } from '@material-hu/icons/tabler';
import Typography from '@material-hu/mui/Typography';

import HuAvatar from '@material-hu/components/design-system/Avatar';
import HuMenuItem from '@material-hu/components/design-system/Menu/components/MenuItem';
import HuTitle from '@material-hu/components/design-system/Title';

type Props = {
  id?: string;
  icon?: TablerIcon;
  onClick: () => void;
  titleText: string;
  descriptionText?: string;
  disabled?: boolean;
  hintText?: string;
  hovered?: boolean;
};

const MenuItemOption = ({
  id,
  icon,
  onClick,
  titleText,
  descriptionText,
  disabled,
  hintText,
  hovered,
}: Props) => {
  return (
    <HuMenuItem
      key={titleText}
      onClick={onClick}
      disabled={disabled}
      sx={{
        position: 'relative',
        ...(hovered && {
          backgroundColor: ({ palette }) =>
            palette.new.action.background.neutral.hover,
        }),
      }}
    >
      {/* Invisible anchor for coachmark - positioned to the left */}
      {id && (
        <span
          id={id}
          style={{
            position: 'absolute',
            left: 20,
            top: '40%',
            transform: 'translateY(-50%)',
            width: 1,
            height: 1,
          }}
        />
      )}
      {icon && (
        <HuAvatar
          Icon={icon}
          size="small"
          sx={{
            backgroundColor: ({ palette }) =>
              palette.new.background.elements.grey,
            color: ({ palette }) =>
              palette.new.action.button.text.tertiary.default,
            mr: 1,
          }}
        />
      )}
      <HuTitle
        title={titleText}
        description={descriptionText}
        variant="S"
        sx={{
          whiteSpace: 'normal',
          flex: 1,
        }}
      />
      {hintText && <Typography variant="globalS">{hintText}</Typography>}
    </HuMenuItem>
  );
};

export default MenuItemOption;