import React, { useState } from 'react';
import PropTypes from 'prop-types';
import styled from '@emotion/styled';
import cloneDeep from 'lodash/cloneDeep';
import Dialog from '@arcblock/ux/lib/Dialog';
import Box from '@mui/material/Box';
import AddIcon from '@mui/icons-material/Add';
import IconButton from '@mui/material/IconButton';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import Button from '@arcblock/ux/lib/Button';
import Empty from '@arcblock/ux/lib/Empty';
import EditIcon from '@arcblock/icons/lib/EditIcon';
import DeleteIcon from '@arcblock/icons/lib/DeleteIcon';
import Toast from '@arcblock/ux/lib/Toast';
import TableSearch from '@arcblock/ux/lib/Datatable/TableSearch';
import { toAddress } from '@arcblock/did';
import DidAddress from '../../did-address';
import { withPermission } from '../../permission';
import { useNodeContext } from '../../contexts/node';
import { useTeamContext } from '../../contexts/team';
import { sleep, BlockletAdminRoles } from '../../util';
import Confirm from '../../confirm';
import ListHeader from '../../list-header';
import TrustedIssuer from './trusted-issuer';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
function TrustedIssuers({
  onCancel,
  hasPermission = false
}) {
  const {
    api
  } = useNodeContext();
  const {
    teamDid,
    trustedPassports
  } = useTeamContext();
  const {
    t
  } = useLocaleContext();
  const [delConfirm, setDelConfirm] = useState(null);
  const [loading, setLoading] = useState(false);
  const [trustedIssuer, setTrustedIssuer] = useState(false);
  const [search, setSearch] = useState('');
  const deleteTrustedIssuer = async did => {
    if (loading) {
      return;
    }
    const index = trustedPassports.findIndex(x => x.issuerDid === did);
    if (index === -1) {
      // should not be here
      Toast.error('Cannot find passports');
    }
    const trustedList = [...trustedPassports];
    trustedList.splice(index, 1);
    try {
      setLoading(true);
      await api.configTrustedPassports({
        input: {
          teamDid,
          trustedPassports: trustedList
        }
      });
      await sleep(800);
      setLoading(false);
      Toast.success(t('common.saveSuccess'));
      setDelConfirm(false);
    } catch (err) {
      setLoading(false);
      Toast.error(err.message);
    }
  };
  const filteredIssuers = trustedPassports.filter(x => !search || x.issuerDid.toLowerCase().includes(search.toLowerCase()));
  return /*#__PURE__*/_jsxs(Dialog, {
    title: t('team.passport.trustedIssuers'),
    open: true,
    onClose: onCancel,
    fullWidth: true,
    PaperProps: {
      style: {
        minHeight: '80vh'
      }
    },
    children: [/*#__PURE__*/_jsx(Div, {
      children: /*#__PURE__*/_jsxs("div", {
        className: "dialog-content",
        children: [/*#__PURE__*/_jsx("div", {
          className: "dialog-h1",
          children: t('team.passport.trustedPassportIssuers')
        }), /*#__PURE__*/_jsx(ListHeader, {
          sx: {
            mt: 3
          },
          actions: /*#__PURE__*/_jsxs(_Fragment, {
            children: [/*#__PURE__*/_jsx(TableSearch, {
              options: {
                searchPlaceholder: t('team.passport.searchIssuerDid'),
                searchDebounceTime: 600
              },
              search: search,
              searchText: search,
              searchTextUpdate: setSearch,
              searchClose: () => setSearch(''),
              onSearchOpen: () => {}
            }), hasPermission && /*#__PURE__*/_jsxs(Button, {
              variant: "contained",
              color: "primary",
              "data-cy": "add-trusted-issuer",
              onClick: () => setTrustedIssuer({
                mode: 'add'
              }),
              children: [/*#__PURE__*/_jsx(AddIcon, {
                style: {
                  fontSize: 16,
                  marginRight: 4
                }
              }), t('team.add')]
            })]
          })
        }), /*#__PURE__*/_jsxs("div", {
          className: "list",
          children: [filteredIssuers.map(x => /*#__PURE__*/_jsxs(Box, {
            sx: {
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between',
              mt: '20px'
            },
            children: [/*#__PURE__*/_jsxs(Box, {
              sx: {
                flexShrink: 0
              },
              children: [/*#__PURE__*/_jsx(DidAddress, {
                copyable: false,
                size: 16,
                did: toAddress(x.issuerDid),
                showDidLogo: false
              }), !!x.remark && /*#__PURE__*/_jsx(Box, {
                sx: {
                  fontSize: 12,
                  maxWidth: '300px'
                },
                children: x.remark
              })]
            }), /*#__PURE__*/_jsx(Box, {
              sx: {
                color: 'gray',
                ml: '28px',
                flexGrow: 1
              },
              children: x.mappings && x.mappings.length ? `${x.mappings.length} ${t('team.passport.mappingRule')}` : t('team.passport.defaultRule')
            }), /*#__PURE__*/_jsxs(Box, {
              sx: {
                flexShrink: 0,
                display: 'flex',
                alignItems: 'center'
              },
              children: [/*#__PURE__*/_jsx(IconButton, {
                onClick: () => setTrustedIssuer({
                  mode: 'update',
                  data: cloneDeep(x)
                }),
                "data-cy": "edit-mapping-rule",
                size: "large",
                children: /*#__PURE__*/_jsx(EditIcon, {})
              }), /*#__PURE__*/_jsx(IconButton, {
                "data-cy": "delete-mapping-rule",
                onClick: () => setDelConfirm({
                  title: t('common.delete'),
                  description: t('common.delConfirmDescription', {
                    data: x.issuerDid
                  }),
                  confirm: t('common.delConfirm'),
                  cancel: t('common.cancel'),
                  onConfirm: () => deleteTrustedIssuer(x.issuerDid),
                  onCancel: () => {
                    setLoading(false);
                    setDelConfirm(null);
                  }
                }),
                size: "large",
                children: /*#__PURE__*/_jsx(DeleteIcon, {})
              })]
            })]
          }, x.issuerDid)), !trustedPassports.length && /*#__PURE__*/_jsx(Empty, {
            children: t('common.empty')
          })]
        })]
      })
    }), trustedIssuer && /*#__PURE__*/_jsx(TrustedIssuer, {
      mode: trustedIssuer.mode,
      data: trustedIssuer.data,
      trustedPassports: cloneDeep(trustedPassports),
      onCancel: () => setTrustedIssuer(null),
      onSuccess: () => {
        setTrustedIssuer(null);
      }
    }), delConfirm && /*#__PURE__*/_jsx(Confirm, {
      title: delConfirm.title,
      description: delConfirm.description,
      confirm: delConfirm.confirm,
      cancel: delConfirm.cancel,
      params: delConfirm.params,
      onConfirm: delConfirm.onConfirm,
      onCancel: delConfirm.onCancel
    })]
  });
}
TrustedIssuers.propTypes = {
  onCancel: PropTypes.func.isRequired,
  hasPermission: PropTypes.bool
};
const TrustedIssuersInDaemon = withPermission(TrustedIssuers, 'mutate_team');
const TrustedIssuersInService = withPermission(TrustedIssuers, '', BlockletAdminRoles);
export default function TrustedIssuersWithPermission(props) {
  const {
    inService
  } = useNodeContext();
  if (inService) {
    return /*#__PURE__*/_jsx(TrustedIssuersInService, {
      ...props
    });
  }
  return /*#__PURE__*/_jsx(TrustedIssuersInDaemon, {
    ...props
  });
}
const Div = styled.div`
  .list {
    .MuiIconButton-root {
      svg {
        fill: #bfbfbf;
      }
    }
  }
`;