import React from "react";
import { Button } from "antd";
import { Icon } from "components/Icon";
import {
  BaseItem,
  TalentProfileModule,
} from "models/talent/talent-profile-module.model";
import { useModules } from "hooks/useModules";
import { flipVisibilityForItemAndCloneArray } from "utils/modules";

interface ItemVisibilityToggleProps {
  module: TalentProfileModule<BaseItem>;
  item: BaseItem;
  disabled?: boolean;
  onClick?: () => void;
}

const ItemVisibilityToggle: React.FC<ItemVisibilityToggleProps> = ({
  module,
  item,
  disabled = false,
  onClick,
}) => {
  const { setModule } = useModules();

  const handleItemVisibilityChanged = (item: BaseItem) => {
    if (onClick) {
      onClick();
      return;
    }

    const updatedItems = flipVisibilityForItemAndCloneArray(item, module.items);
    setModule && setModule({ ...module, isUpdate: true, items: updatedItems });
  };

  return (
    <Button
      className="p--0 d--flex align__items--center height--24 min-h-auto"
      onClick={() => handleItemVisibilityChanged(item)}
      disabled={disabled ? disabled : !module.visible}
      type="link"
    >
      <Icon
        name={
          !module.visible || disabled
            ? "closed-eye-inactive"
            : item.visible === false
              ? "closed-eye"
              : "open-eye"
        }
      />
    </Button>
  );
};

export default ItemVisibilityToggle;
