import React, { useState } from "react";
import PropTypes from "prop-types";
import {
  CheckButton,
  Commands,
  PhoneIcon,
  PhoneIconContainer,
  Popover,
} from "./ChatCommands.styled";
import selectedTheme from "../../../../themes";
import { useTranslation } from "react-i18next";
import PhonePopover from "../../../Popovers/PhonePopover/PhonePopover";

// Not being used, but kept for potential future needs
const ChatCommands = (props) => {
  const { t } = useTranslation();
  const [showPhonePopover, setShowPhonePopover] = useState(false);
  const [phonePopoverAnchorEl, setPhonePopoverAnchorEl] = useState(null);

  const togglePhonePopover = (event) => {
    setShowPhonePopover((prevState) => !prevState);
    setPhonePopoverAnchorEl((prevState) =>
      prevState ? null : event.currentTarget
    );
  };

  return (
    <Commands>
      <PhoneIconContainer onClick={togglePhonePopover}>
        <PhoneIcon />
      </PhoneIconContainer>
      <CheckButton
        buttoncolor={selectedTheme.colors.primaryPurple}
        textcolor={selectedTheme.colors.primaryPurple}
        variant={"outlined"}
        style={{ fontWeight: "600" }}
        onClick={props.routeToItem}
      >
        {t("messages.seeChats")}
      </CheckButton>
      <Popover
        anchorEl={phonePopoverAnchorEl}
        open={showPhonePopover}
        anchorRight
        onClose={togglePhonePopover}
        content={<PhonePopover />}
      />
    </Commands>
  );
};

ChatCommands.propTypes = {
  routeToItem: PropTypes.func,
};

export default ChatCommands;
