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 Tag from '@arcblock/ux/lib/Tag';
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 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 TrustedFactory from './trusted-factory';
import ListHeader from '../../list-header';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
function TrustedFactories({
  onCancel,
  hasPermission = false
}) {
  const {
    api
  } = useNodeContext();
  const {
    teamDid,
    trustedFactories
  } = useTeamContext();
  const {
    t
  } = useLocaleContext();
  const [delConfirm, setDelConfirm] = useState(null);
  const [loading, setLoading] = useState(false);
  const [trustedFactory, setTrustedFactory] = useState(null);
  const [search, setSearch] = useState('');
  const deleteTrustedFactory = async did => {
    if (loading) {
      return;
    }
    try {
      setLoading(true);
      await api.configTrustedFactories({
        input: {
          teamDid,
          trustedFactories: trustedFactories.filter(x => x.factoryAddress !== did)
        }
      });
      await sleep(800);
      setLoading(false);
      Toast.success(t('common.saveSuccess'));
      setDelConfirm(null);
    } catch (err) {
      setLoading(false);
      Toast.error(err.message);
    }
  };
  const filterFactories = trustedFactories.filter(x => !search || x.factoryAddress.toLowerCase().includes(search.toLowerCase()));
  return /*#__PURE__*/_jsxs(Dialog, {
    title: t('team.passport.trustedFactories'),
    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.trustedFactoriesTip')
        }), /*#__PURE__*/_jsx(ListHeader, {
          sx: {
            mt: 3
          },
          actions: /*#__PURE__*/_jsxs(_Fragment, {
            children: [/*#__PURE__*/_jsx(TableSearch, {
              options: {
                searchPlaceholder: t('team.passport.searchFactoryAddress'),
                searchDebounceTime: 600
              },
              search: search,
              searchText: search,
              searchTextUpdate: setSearch,
              searchClose: () => setSearch(''),
              onSearchOpen: () => {}
            }), hasPermission && /*#__PURE__*/_jsxs(Button, {
              variant: "contained",
              color: "primary",
              size: "small",
              "data-cy": "add-trusted-factory",
              onClick: () => setTrustedFactory({
                mode: 'add'
              }),
              children: [/*#__PURE__*/_jsx(AddIcon, {
                style: {
                  fontSize: 16,
                  marginRight: 4
                }
              }), t('team.add')]
            })]
          })
        }), /*#__PURE__*/_jsxs("div", {
          className: "list",
          children: [filterFactories.map(x => /*#__PURE__*/_jsxs(Box, {
            sx: {
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between',
              mt: '20px'
            },
            children: [/*#__PURE__*/_jsxs(Box, {
              sx: {
                flexGrow: 1
              },
              children: [/*#__PURE__*/_jsx(DidAddress, {
                copyable: false,
                did: x.factoryAddress,
                size: 16,
                showDidLogo: false
              }), !!x.remark && /*#__PURE__*/_jsx(Box, {
                sx: {
                  fontSize: 12,
                  maxWidth: '300px'
                },
                children: x.remark
              })]
            }), /*#__PURE__*/_jsx(Box, {
              sx: {
                color: 'gray',
                mr: '24px'
              },
              children: /*#__PURE__*/_jsx(Tag, {
                type: "success",
                children: x.passport.role
              })
            }), /*#__PURE__*/_jsxs(Box, {
              sx: {
                flexShrink: 0,
                display: 'flex',
                alignItems: 'center'
              },
              children: [/*#__PURE__*/_jsx(IconButton, {
                onClick: () => setTrustedFactory({
                  mode: 'update',
                  data: cloneDeep(x)
                }),
                "data-cy": "edit-trusted-factory",
                size: "large",
                children: /*#__PURE__*/_jsx(EditIcon, {})
              }), /*#__PURE__*/_jsx(IconButton, {
                "data-cy": "delete-trusted-factory",
                onClick: () => setDelConfirm({
                  title: t('common.delete'),
                  description: t('common.delConfirmDescription', {
                    data: x.factoryAddress
                  }),
                  confirm: t('common.delConfirm'),
                  cancel: t('common.cancel'),
                  onConfirm: () => deleteTrustedFactory(x.factoryAddress),
                  onCancel: () => {
                    setLoading(false);
                    setDelConfirm(null);
                  }
                }),
                size: "large",
                children: /*#__PURE__*/_jsx(DeleteIcon, {})
              })]
            })]
          }, x.factoryAddress)), !trustedFactories.length && /*#__PURE__*/_jsx(Empty, {
            children: t('common.empty')
          })]
        })]
      })
    }), trustedFactory && /*#__PURE__*/_jsx(TrustedFactory, {
      data: trustedFactory.data,
      trustedFactories: cloneDeep(trustedFactories),
      onCancel: () => setTrustedFactory(null),
      onSuccess: () => {
        setTrustedFactory(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
    })]
  });
}
TrustedFactories.propTypes = {
  onCancel: PropTypes.func.isRequired,
  hasPermission: PropTypes.bool
};
const TrustedFactoriesInDaemon = withPermission(TrustedFactories, 'mutate_team');
const TrustedFactoriesInService = withPermission(TrustedFactories, '', BlockletAdminRoles);
export default function TrustedFactoriesWithPermission(props) {
  const {
    inService
  } = useNodeContext();
  if (inService) {
    return /*#__PURE__*/_jsx(TrustedFactoriesInService, {
      ...props
    });
  }
  return /*#__PURE__*/_jsx(TrustedFactoriesInDaemon, {
    ...props
  });
}
const Div = styled.div`
  .list {
    .MuiIconButton-root {
      svg {
        fill: #bfbfbf;
      }
    }
  }
`;