import { useState } from 'react';
import { Box, Button } from '@mui/material';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import AddIcon from '@mui/icons-material/Add';
import { BLOCKLET_CONFIGURABLE_KEY } from '@blocklet/constant';
import EditIcon from '@arcblock/icons/lib/EditIcon';
import LockIcon from '@arcblock/icons/lib/LockIcon';
import { useOrgsContext } from '../context';
import MutateRole from '../../passports/mutate-role';
import { PassportItem, Div } from '../../passports';
import { createPassportSvg } from '../../../util/passport';
import { PassportDetail } from '../../passports/detail';
import { isProtectedRole } from '../../../util';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default function OrgPassports() {
  const {
    orgDetail,
    requests
  } = useOrgsContext();
  const {
    roles,
    org,
    editable
  } = orgDetail || {};
  const [updateForm, setUpdateForm] = useState(false);
  const passportColor = (window.blocklet?.environments || []).find(x => x.key === BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_PASSPORT_COLOR)?.value || 'auto';
  return /*#__PURE__*/_jsxs(Div, {
    children: [/*#__PURE__*/_jsx(Box, {
      className: "list",
      children: roles.map(role => /*#__PURE__*/_jsx(PassportItem, {
        role: role,
        createPassportSvg: createPassportSvg,
        onUpdate: setUpdateForm,
        actions: editable ? /*#__PURE__*/_jsx("div", {
          className: "action",
          children: isProtectedRole(role.name) ? /*#__PURE__*/_jsx(LockIcon, {}) : /*#__PURE__*/_jsx(EditIcon, {})
        }) : null,
        passportProps: {
          issuer: org.name,
          issuerDid: org.ownerDid,
          ownerDid: org.ownerDid,
          preferredColor: passportColor
        }
      }, role.name))
    }), updateForm && /*#__PURE__*/_jsx(PassportDetail, {
      onCancel: () => setUpdateForm(false),
      roles: roles,
      onSuccess: () => {
        setUpdateForm(false);
        requests.getOrgRoles(org.id);
      },
      onDelete: () => {
        setUpdateForm(false);
        requests.getOrgRoles(org.id);
      },
      mode: "update",
      roleName: updateForm.name,
      item: updateForm,
      orgId: org.id,
      hasPermission: editable
    })]
  });
}
export function OrgPassportsExtra() {
  const {
    t
  } = useLocaleContext();
  const {
    orgDetail,
    passportParams
  } = useOrgsContext();
  const {
    org,
    editable
  } = orgDetail || {};
  if (!editable) {
    return null;
  }
  return /*#__PURE__*/_jsx(Box, {
    sx: {
      display: 'flex',
      gap: 1
    },
    children: /*#__PURE__*/_jsx(Button, {
      variant: "contained",
      size: "small",
      onClick: () => {
        passportParams.onTriggerPassportDialog({
          org,
          open: true
        });
      },
      startIcon: /*#__PURE__*/_jsx(AddIcon, {}),
      children: t('team.passport.create.title')
    })
  });
}
export function OrgMutateRole() {
  const {
    teamDid,
    passportParams,
    requests
  } = useOrgsContext();
  const {
    visible,
    org
  } = passportParams || {};
  if (!visible) {
    return null;
  }
  return /*#__PURE__*/_jsx(MutateRole, {
    teamDid: teamDid,
    orgId: org.id,
    onCancel: () => passportParams.onTriggerPassportDialog({
      open: false
    }),
    onSuccess: () => {
      passportParams.onTriggerPassportDialog({
        open: false
      });
      requests.getOrgRoles(org.id);
    }
  });
}