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

interface ModuleVisibilityToggleProps {
  module: TalentProfileModule<BaseItem>;
  disabled?: boolean;
}

const ModuleVisibilityToggle: React.FC<ModuleVisibilityToggleProps> = ({
  module,
  disabled = false
}) => {
  const { setModule } = useModules();

  const handleToggleModuleVisibility = (visible: boolean) => {
    setModule({ ...module, visible });
  };

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

export default ModuleVisibilityToggle;
