import React from 'react';

import { RoleFormModal } from './modal';
import type { RolePageTreeNode } from '../types';

type RolePermissionSummary = {
  pageIds: number[];
  pageNames: string[];
  actions: string[];
};

interface EditModalProps {
  id?: number;
  onClose: () => void;
  onSuccess?: () => void;
  pageTreeData?: RolePageTreeNode[];
  rolePermissionSummary?: RolePermissionSummary;
}

export const EditModal: React.FC<EditModalProps> = ({
  id,
  onClose,
  onSuccess,
  pageTreeData,
  rolePermissionSummary,
}) => {
  const normalizedPageIds = rolePermissionSummary?.pageIds?.map((pageId) =>
    String(pageId),
  );

  const handleMutationSuccess = () => {
    onSuccess?.();
    onClose?.();
  };

  return (
    <RoleFormModal
      action="edit"
      id={id}
      onCancel={onClose}
      onMutationSuccess={handleMutationSuccess}
      pageTreeData={pageTreeData}
      selectedPageIds={normalizedPageIds}
      selectedActions={rolePermissionSummary?.actions}
    />
  );
};
