import React from "react";
import PropTypes from "prop-types";
import {
  HeaderPopoverContainer,
  PopoverButton,
  PopoverButtonsContainer,
  PopoverList,
  PopoverListItem,
  PopoverListItemAvatar,
  PopoverListItemAvatarContainer,
  PopoverListItemProfileAvatar,
  PopoverListItemTextContainer,
  PopoverNoItemsText,
  PopoverTitle,
} from "./HeaderPopover.styled";
import { useTranslation } from "react-i18next";

const HeaderPopover = (props) => {
  const { t } = useTranslation();
  return (
    <HeaderPopoverContainer>
      <PopoverTitle p={2}>{props.title}</PopoverTitle>
      <PopoverList>
        {props.items?.length > 0 ? (
          props.items.map((item, index) => (
            <PopoverListItem key={index}>
              <PopoverListItemAvatarContainer>
                {props.isProfile ? (
                  <PopoverListItemProfileAvatar
                    alt={item.alt}
                    src={item.src}
                    onClick={item?.onClick}
                  />
                ) : (
                  <PopoverListItemAvatar
                    alt={item.alt}
                    src={item.src}
                    onClick={item?.onClick}
                  />
                )}
              </PopoverListItemAvatarContainer>
              <PopoverListItemTextContainer
                primaryTypographyProps={{
                  onClick: item.onClick,
                }}
                primary={item.title}
                secondary={item.text}
              ></PopoverListItemTextContainer>
            </PopoverListItem>
          ))
        ) : (
          <PopoverNoItemsText>{t("header.noItems")}</PopoverNoItemsText>
        )}
      </PopoverList>
      <PopoverButtonsContainer hideButtons={props.hideButtons}>
        <PopoverButton
          sx={{
            mr: 2,
            mb: 2,
          }}
          variant="text"
          endIcon={props.buttonIcon}
          onClick={props.buttonOnClick}
        >
          {props.buttonText}
        </PopoverButton>
        {props.secondButtonText && (
          <PopoverButton
            sx={{
              mr: 2,
              mb: 2,
            }}
            variant="text"
            endIcon={props.secondButtonIcon}
            onClick={props.secondButtonOnClick}
          >
            {props.secondButtonText}
          </PopoverButton>
        )}
      </PopoverButtonsContainer>
    </HeaderPopoverContainer>
  );
};

HeaderPopover.propTypes = {
  title: PropTypes.string,
  items: PropTypes.array,
  buttonText: PropTypes.string,
  isProfile: PropTypes.bool,
  secondButtonText: PropTypes.string,
  buttonIcon: PropTypes.any,
  secondButtonIcon: PropTypes.any,
  buttonOnClick: PropTypes.func,
  secondButtonOnClick: PropTypes.func,
  hideButtons: PropTypes.bool,
};

export default HeaderPopover;
