import PropTypes from 'prop-types';
import { Box } from '@mui/material';
import Dialog from '@arcblock/ux/lib/Dialog';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import { useMemoizedFn } from 'ahooks';
import OrgsTable from './table';
import OrgsCard from './card';
import { OrgsProvider, useOrgsContext } from './context';
import MutateOrgDialog from './mutate';
import OrgDetail from './detail';
import InviteDialog from './detail/invite';
import Invitations from '../members/invitations';
import { OrgMutateRole } from './detail/passports';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function OrgsContainer({
  layout = 'card',
  id = ''
}) {
  const {
    t
  } = useLocaleContext();
  const {
    mutationParams,
    inviteParams,
    orgDetail,
    requests,
    passportParams
  } = useOrgsContext();
  const {
    invitations,
    org
  } = orgDetail || {};
  const {
    showInvite,
    showInviting,
    onTriggerInvitingDialog
  } = inviteParams || {};
  const renderContainer = () => {
    if (id) {
      return /*#__PURE__*/_jsx(OrgDetail, {
        id: id
      });
    }
    return layout === 'table' ? /*#__PURE__*/_jsx(OrgsTable, {}) : /*#__PURE__*/_jsx(OrgsCard, {});
  };
  const refreshInvitations = useMemoizedFn(() => {
    requests.getOrgInvitations(org.id);
  });
  return /*#__PURE__*/_jsxs(Box, {
    children: [renderContainer(), mutationParams.mode ? /*#__PURE__*/_jsx(MutateOrgDialog, {
      mode: mutationParams.mode,
      item: mutationParams.org
    }) : null, showInvite ? /*#__PURE__*/_jsx(InviteDialog, {}) : null, showInviting ? /*#__PURE__*/_jsx(Dialog, {
      title: t('common.inviting'),
      onClose: () => onTriggerInvitingDialog({
        open: false
      }),
      open: showInviting,
      maxWidth: "lg",
      fullWidth: true,
      children: /*#__PURE__*/_jsx(Invitations, {
        invitations: invitations,
        onRefresh: refreshInvitations
      })
    }) : null, passportParams.visible ? /*#__PURE__*/_jsx(OrgMutateRole, {}) : null]
  });
}
OrgsContainer.propTypes = {
  layout: PropTypes.oneOf(['table', 'card']),
  id: PropTypes.string
};
export default function Orgs({
  layout = 'card',
  mode = 'user-center',
  editable = true,
  id = ''
}) {
  return /*#__PURE__*/_jsx(OrgsProvider, {
    editable: editable,
    mode: mode,
    id: id,
    children: /*#__PURE__*/_jsx(OrgsContainer, {
      layout: layout,
      id: id
    })
  });
}
Orgs.propTypes = {
  layout: PropTypes.oneOf(['table', 'card']),
  mode: PropTypes.oneOf(['dashboard', 'user-center']),
  editable: PropTypes.bool,
  id: PropTypes.string
};