import React, { MouseEvent, useState } from "react";
import Card from "../card/Card";
import CardContent from "../card-content/CardContent";
import type { InteractiveCard } from "@app/models/components";
import "./interactive-card-styles.scss";
import Radio from "../radio/Radio";
import { CheckCircleIcon, MoreHorizIcon } from "@app/assets/images/icons";
import Menu from "../menu/Menu";
import IconButton from "../icon-button/IconButton";
import { Oval } from "react-loader-spinner";
import { useBlockNavigation } from "@settings/contexts/NavigationContext";
import ConfigItem from "../config-item/ConfigItem";

const InteractiveCardComponent: React.FC<InteractiveCard> = ({
  title,
  image,
  biography,
  metaData,
  selected,
  onSelect,
  onClick,
  options,
  isLoading,
  hasRadio = true,
}) => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const { isNavBlocked } = useBlockNavigation();
  const localization = sfsyncI18n.data;

  const handleOpenMenu = (e: MouseEvent<HTMLButtonElement>) => {
    e.stopPropagation();
    setIsMenuOpen(!isMenuOpen);
  };

  const closeMenu = () => {
    setIsMenuOpen(false);
  };

  return (
    title && (
      <div
        className={`interactiveCard-root ${
          selected ? "interactiveCard-selected" : ""
        } ${onClick ? "interactiveCard-clickable" : ""}`}
      >
        <Card id="interactiveCard" elevation={false} onClick={onClick}>
          <CardContent padding="md">
            <div className="interactiveCard-contentWrapper">
              <div className="bio-InteractiveCard-content">
                {hasRadio && (
                  <div className="interactiveCard-radioContainer">
                    {isLoading && selected ? (
                      <Oval
                        height={24}
                        width={24}
                        color="#8134af"
                        secondaryColor="#b080cd"
                        wrapperStyle={{}}
                        wrapperClass=""
                        visible={true}
                        ariaLabel="oval-loading"
                        strokeWidth={6}
                        strokeWidthSecondary={6}
                      />
                    ) : (
                      <Radio
                        id="interactiveCard-radio"
                        checked={selected}
                        onChange={onSelect}
                        icons={{ checkedIcon: CheckCircleIcon }}
                      />
                    )}
                  </div>
                )}
                <div className="interactiveCard-details">
                  <ConfigItem
                    name={title}
                    image={image}
                    biography={biography}
                  />
                  {!!metaData?.length && (
                    <div className="interactiveCard-metaContainer">
                      {metaData?.map((meta) => (
                        <p className="interactiveCard-meta" key={meta.label}>
                          <span>{meta.label}</span>: {meta.value}
                        </p>
                      ))}
                    </div>
                  )}
                </div>
              </div>
              {!!options?.length && (
                <div className="interactiveCard-icon">
                  <Menu open={isMenuOpen} options={options} onClose={closeMenu}>
                    <IconButton
                      icon={MoreHorizIcon}
                      size="md"
                      onClickHandler={handleOpenMenu}
                      disabled={!sfsyncRestAPI?.isAdmin || isNavBlocked}
                    />
                  </Menu>
                </div>
              )}
            </div>
          </CardContent>
        </Card>
      </div>
    )
  );
};

export default InteractiveCardComponent;