import React, { useState } from 'react';
import PropTypes from 'prop-types';
import Box from '@mui/material/Box';
import Toast from '@arcblock/ux/lib/Toast';
import Button from '@arcblock/ux/lib/Button';
import SplitButton from '@arcblock/ux/lib/SplitButton';
import Spinner from '@mui/material/CircularProgress';
import Dialog from '@arcblock/ux/lib/Dialog';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import { useNodeContext } from '../../../contexts/node';
import { useTeamContext } from '../../../contexts/team';
import { sleep, BlockletAdminRoles } from '../../../util';
import Permission from '../../../permission';
import Color from '../color';
import TrustedIssuers from '../trusted-issuers';
import TrustedFactories from '../trusted-factories';
import Passports from '../index';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
export default function PassportRole({
  createPassportSvg
}) {
  const {
    t
  } = useLocaleContext();
  const {
    api,
    inService
  } = useNodeContext();
  const {
    teamDid,
    refresh: refreshTeam,
    enablePassportIssuance,
    isNodeTeam
  } = useTeamContext();
  const [showColor, setShowColor] = useState(false);
  const [showTrustedIssuers, setShowTrustedIssuers] = useState(false);
  const [showTrustedFactories, setShowTrustedFactories] = useState(false);
  const [loading, setLoading] = useState(false);
  const [roleDialog, setRoleDialog] = useState(false);
  const toggleShowIssue = async e => {
    e.stopPropagation();
    if (loading) {
      return;
    }
    setLoading(true);
    try {
      await api.configPassportIssuance({
        input: {
          teamDid,
          enable: !enablePassportIssuance
        }
      });
      refreshTeam();
      await sleep(800);
      Toast.success(t('common.configSuccess'));
    } catch (error) {
      Toast.error(error.message);
    } finally {
      setLoading(false);
    }
  };
  return /*#__PURE__*/_jsxs(Box, {
    sx: {
      display: 'flex',
      alignItems: 'center',
      gap: 1,
      ml: 1
    },
    children: [/*#__PURE__*/_jsx(Permission, {
      permission: inService ? '' : 'mutate_team',
      role: inService ? BlockletAdminRoles : [],
      children: /*#__PURE__*/_jsx(SplitButton, {
        variant: "outlined",
        menuButtonProps: {
          'data-cy': 'trusted-issuers-more'
        },
        menu: /*#__PURE__*/_jsxs(_Fragment, {
          children: [/*#__PURE__*/_jsx(SplitButton.Item, {
            onClick: () => setShowTrustedIssuers(true),
            "data-cy": "config-trusted-issuers",
            children: /*#__PURE__*/_jsxs(Box, {
              children: [t('team.passport.trustedPassportIssuers'), /*#__PURE__*/_jsx(Box, {
                sx: {
                  fontSize: 12,
                  color: '#888'
                },
                children: t('team.passport.trustedPassportIssuersTip')
              })]
            })
          }), /*#__PURE__*/_jsx(SplitButton.Item, {
            onClick: () => setShowTrustedFactories(true),
            "data-cy": "config-show-trusted-factories",
            children: /*#__PURE__*/_jsxs(Box, {
              children: [t('team.passport.configFactories'), /*#__PURE__*/_jsx(Box, {
                sx: {
                  fontSize: 12,
                  color: '#888'
                },
                children: t('team.passport.configFactoriesTip')
              })]
            })
          }), /*#__PURE__*/_jsx(SplitButton.Item, {
            "data-cy": "config-show-issue-passport",
            onClick: toggleShowIssue,
            children: /*#__PURE__*/_jsxs(Box, {
              sx: {
                display: 'flex',
                alignItems: 'center'
              },
              children: [loading && /*#__PURE__*/_jsx(Spinner, {
                size: 16,
                style: {
                  marginRight: 8
                }
              }), /*#__PURE__*/_jsxs(Box, {
                children: [enablePassportIssuance ? t('team.passport.disableIssuance') : t('team.passport.enableIssuance'), /*#__PURE__*/_jsx(Box, {
                  sx: {
                    fontSize: 12,
                    color: '#888'
                  },
                  children: enablePassportIssuance ? t('team.passport.disableIssuanceTip') : t('team.passport.enableIssuanceTip')
                })]
              })]
            })
          }), !isNodeTeam && /*#__PURE__*/_jsx(SplitButton.Item, {
            onClick: () => setShowColor(true),
            "data-cy": "config-passport-color",
            children: /*#__PURE__*/_jsxs(Box, {
              children: [t('team.passport.configColor'), /*#__PURE__*/_jsx(Box, {
                sx: {
                  fontSize: 12,
                  color: '#888'
                },
                children: t('team.passport.configColorTip')
              })]
            })
          })]
        }),
        children: () => /*#__PURE__*/_jsx(Button, {
          variant: "outlined",
          onClick: () => {
            setRoleDialog(true);
          },
          children: t('team.passport.view')
        })
      })
    }), showTrustedIssuers && /*#__PURE__*/_jsx(TrustedIssuers, {
      onCancel: () => setShowTrustedIssuers(false)
    }), showTrustedFactories && /*#__PURE__*/_jsx(TrustedFactories, {
      onCancel: () => setShowTrustedFactories(false)
    }), showColor && /*#__PURE__*/_jsx(Color, {
      onCancel: () => setShowColor(false),
      onSuccess: () => setShowColor(false)
    }), roleDialog && /*#__PURE__*/_jsx(Dialog, {
      open: true,
      maxWidth: "lg",
      onClose: () => setRoleDialog(false),
      onBackdropClick: () => setRoleDialog(false),
      onEscapeKeyDown: () => setRoleDialog(false),
      title: t('team.passport.view'),
      children: /*#__PURE__*/_jsx(Passports, {
        createPassportSvg: createPassportSvg,
        onCancel: () => setRoleDialog(false)
      })
    })]
  });
}
PassportRole.propTypes = {
  createPassportSvg: PropTypes.func.isRequired
};