/* eslint-disable react/no-danger */
import { useState } from 'react';
import PropTypes from 'prop-types';
import Box from '@mui/material/Box';
import Dialog from '@arcblock/ux/lib/Dialog';
import Spinner from '@mui/material/CircularProgress';
import { ChromePicker } from 'react-color';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import Button from '@arcblock/ux/lib/Button';
import createPassportSvg from '@abtnode/auth/lib/util/create-passport-svg';
import { getDisplayName } from '@blocklet/meta/lib/util';
import { getPassportColorFromDid } from '@arcblock/nft-display';
import { BLOCKLET_CONFIGURABLE_KEY } from '@blocklet/constant';
import Toast from '@arcblock/ux/lib/Toast';
import { useNodeContext } from '../../contexts/node';
import { useBlockletContext } from '../../contexts/blocklet';
import { BlockletAdminRoles } from '../../util';
import { withPermission } from '../../permission';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
function PassportColor({
  onCancel,
  onSuccess
}) {
  const {
    api
  } = useNodeContext();
  const {
    blocklet
  } = useBlockletContext();
  const {
    t
  } = useLocaleContext();
  const [loading, setLoading] = useState(false);
  const curColor = (blocklet.environments.find(x => x.key === 'BLOCKLET_PASSPORT_COLOR') || {}).value || 'auto';
  const defaultColor = curColor === 'auto' ? getPassportColorFromDid(blocklet.appDid) : curColor;
  const [color, setColor] = useState(defaultColor);
  const onSubmit = async () => {
    const params = [{
      key: BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_PASSPORT_COLOR,
      value: color
    }];
    try {
      setLoading(true);
      await api.configBlocklet({
        input: {
          did: blocklet.meta.did,
          configs: params
        }
      });
      onSuccess();
    } catch (err) {
      Toast.error(err.message);
    } finally {
      setLoading(false);
    }
  };
  return /*#__PURE__*/_jsx(Dialog, {
    title: t('team.passport.color'),
    onClose: onCancel,
    open: true,
    fullWidth: true,
    actions: /*#__PURE__*/_jsxs(_Fragment, {
      children: [/*#__PURE__*/_jsx(Button, {
        onClick: onCancel,
        color: "inherit",
        children: t('common.cancel')
      }), /*#__PURE__*/_jsxs(Button, {
        onClick: onSubmit,
        color: "primary",
        disabled: loading,
        variant: "contained",
        autoFocus: true,
        "data-cy": "color-btn-confirm",
        children: [loading && /*#__PURE__*/_jsx(Spinner, {
          size: 16
        }), t('common.save')]
      })]
    }),
    children: /*#__PURE__*/_jsxs(Box, {
      className: "dialog-content",
      sx: {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center'
      },
      children: [/*#__PURE__*/_jsx(ChromePicker, {
        disableAlpha: true,
        color: color,
        onChange: c => setColor(c.hex)
      }), /*#__PURE__*/_jsx("div", {
        style: {
          width: 220,
          marginLeft: 24
        },
        dangerouslySetInnerHTML: {
          __html: createPassportSvg({
            scope: 'passport',
            role: 'owner',
            title: 'Owner',
            issuer: getDisplayName(blocklet),
            issuerDid: blocklet.appDid,
            ownerName: 'Your Name',
            ownerDid: blocklet.appDid,
            preferredColor: color
          })
        }
      })]
    })
  });
}
const PassportColorInDaemon = withPermission(PassportColor, 'mutate_team');
const PassportColorInService = withPermission(PassportColor, '', BlockletAdminRoles);
export default function PassportColorWithPermission(props) {
  const {
    inService
  } = useNodeContext();
  if (inService) {
    return /*#__PURE__*/_jsx(PassportColorInService, {
      ...props
    });
  }
  return /*#__PURE__*/_jsx(PassportColorInDaemon, {
    ...props
  });
}
PassportColor.propTypes = {
  onCancel: PropTypes.func.isRequired,
  onSuccess: PropTypes.func.isRequired
};