/**
 * org 详情页
 */
import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { Box } from '@mui/material';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import Empty from '@arcblock/ux/lib/Empty';
import Breadcrumb from './breadcrumb';
import Basic from './basic';
import Tabs from './tabs';
import { useOrgsContext } from '../context';
import OrgMembers, { MemberExtra } from './members';
import OrgSettings from './settings';
import OrgPassports, { OrgPassportsExtra } from './passports';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default function OrgDetail({
  id = '',
  inDialog = false
}) {
  const {
    orgDetail
  } = useOrgsContext();
  const {
    t
  } = useLocaleContext();
  const [currentTab, setCurrentTab] = useState('members');
  const {
    org,
    loading,
    refresh,
    error
  } = orgDetail || {};
  const tabs = [{
    label: t('team.orgs.members'),
    value: 'members'
  }, {
    label: t('common.settings'),
    value: 'settings'
  }, {
    label: t('team.member.passports'),
    value: 'passports'
  }];
  useEffect(() => {
    if (id && inDialog) {
      refresh(id);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [id, inDialog]);
  if (error) {
    return /*#__PURE__*/_jsx(Empty, {
      children: error
    });
  }
  if (!org) {
    return null;
  }
  const renderTabs = () => {
    if (currentTab === 'members') {
      return /*#__PURE__*/_jsx(MemberExtra, {});
    }
    if (currentTab === 'passports') {
      return /*#__PURE__*/_jsx(OrgPassportsExtra, {});
    }
    return null;
  };
  return /*#__PURE__*/_jsxs(Box, {
    children: [!inDialog && /*#__PURE__*/_jsx(Breadcrumb, {
      org: org,
      loading: loading
    }), /*#__PURE__*/_jsxs(Box, {
      sx: {
        mt: 2
      },
      children: [/*#__PURE__*/_jsx(Basic, {
        org: org,
        loading: loading
      }), /*#__PURE__*/_jsxs(Box, {
        sx: {
          mt: 1,
          p: 2,
          border: theme => `1px solid ${theme.palette.divider}`,
          borderRadius: 1
        },
        children: [/*#__PURE__*/_jsx(Tabs, {
          tabs: tabs,
          currentTab: currentTab,
          onTabChange: setCurrentTab,
          loading: loading,
          extra: renderTabs()
        }), /*#__PURE__*/_jsxs(Box, {
          sx: {
            mt: 2
          },
          children: [currentTab === 'members' && /*#__PURE__*/_jsx(OrgMembers, {}), currentTab === 'settings' && /*#__PURE__*/_jsx(OrgSettings, {}), currentTab === 'passports' && /*#__PURE__*/_jsx(OrgPassports, {})]
        })]
      })]
    })]
  });
}
OrgDetail.propTypes = {
  id: PropTypes.string,
  inDialog: PropTypes.bool
};