/* eslint-disable prettier/prettier */
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import styled from '@emotion/styled';
import get from 'lodash/get';
import Toast from '@arcblock/ux/lib/Toast';
import AddIcon from '@mui/icons-material/Add';
import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
import { useTheme, Box, Tooltip, RadioGroup, FormControlLabel, Radio } from '@mui/material';
import { useReactive } from 'ahooks';
import { getWalletDid } from '@blocklet/meta/lib/did-utils';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import Button from '@arcblock/ux/lib/Button';
import RevokeIcon from '@arcblock/icons/lib/RevokeIcon';
import ExternalIssuerIcon from '@arcblock/icons/lib/ExternalIssuerIcon';
import Empty from '@arcblock/ux/lib/Empty';
import { PASSPORT_STATUS } from '@abtnode/constant';
import { useNodeContext } from '../../contexts/node';
import { useSessionContext } from '../../contexts/session';
import { useTeamContext } from '../../contexts/team';
import { useBlockletContext } from '../../contexts/blocklet';
import { formatError, BlockletAdminRoles } from '../../util';
import Confirm from '../../confirm';
import Permission from '../../permission';
import SearchInput from '../search-input';
import ListHeader from '../styles/list-header';
import IssuePassport from './issue-passport';
import PassportItem from './passport-item';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function ConfirmDescription({
  action,
  passport
}) {
  const {
    t
  } = useLocaleContext();
  const {
    roles
  } = useTeamContext();
  const role = roles.find(x => x.name === passport.role);
  return /*#__PURE__*/_jsxs("div", {
    children: [/*#__PURE__*/_jsx("div", {
      children: action === 'enable' ? t('team.member.enablePassportDescription') : t('team.member.revokePassportDescription')
    }), role && /*#__PURE__*/_jsx(Box, {
      sx: {
        mt: 3,
        fontWeight: 'bold'
      },
      children: t('team.member.passportPermissionTitle')
    }), role && /*#__PURE__*/_jsx(Box, {
      sx: {
        mt: 1
      },
      children: role.description
    })]
  });
}
ConfirmDescription.propTypes = {
  action: PropTypes.string.isRequired,
  passport: PropTypes.object.isRequired
};
export default function Passports({
  user,
  onCreate = () => {},
  createPassportSvg
}) {
  const currentState = useReactive({
    scope: 'passport'
  });
  const theme = useTheme();
  const {
    t
  } = useLocaleContext();
  const {
    session
  } = useSessionContext();
  const {
    roles,
    teamDid,
    teamIssuerDid,
    refresh: refreshTeam,
    enablePassportIssuance,
    trustedPassports,
    passportColor,
    blocklet
  } = useTeamContext();
  const {
    appIdList: idList
  } = useBlockletContext();
  const {
    api,
    inService,
    info: nodeInfo
  } = useNodeContext();
  const [loading, setLoading] = useState(false);
  const [toggleConfirm, setToggleConfirm] = useState(null);
  const [showIssueDialog, setShowIssueDialog] = useState(false);
  const [search, setSearch] = useState('');
  const appIdList = [teamIssuerDid, ...(idList || [])].filter(Boolean);
  const passports = (get(user, 'passports') || []).map(x => ({
    ...x,
    revoked: x.status === PASSPORT_STATUS.REVOKED
  }));
  const togglePassportStatus = async passport => {
    if (loading) {
      return;
    }
    setLoading(true);
    try {
      const method = passport.status === PASSPORT_STATUS.REVOKED ? 'enableUserPassport' : 'revokeUserPassport';
      await api[method]({
        input: {
          teamDid,
          userDid: user.did,
          passportId: passport.id
        }
      });
      refreshTeam();
    } catch (err) {
      Toast.error(formatError(err));
    } finally {
      setLoading(false);
      setToggleConfirm(null);
    }
  };
  const confirmToggle = item => item.status === PASSPORT_STATUS.REVOKED ? setToggleConfirm({
    title: t('team.member.enablePassport'),
    description: /*#__PURE__*/_jsx(ConfirmDescription, {
      action: "enable",
      passport: item
    }),
    confirm: t('common.enable'),
    cancel: t('common.cancel'),
    onConfirm: () => {
      togglePassportStatus(item);
    },
    onCancel: () => {
      setLoading(false);
      setToggleConfirm(null);
    },
    color: 'primary'
  }) : setToggleConfirm({
    title: t('team.member.revokePassport'),
    description: /*#__PURE__*/_jsx(ConfirmDescription, {
      action: "revoke",
      passport: item
    }),
    confirm: t('common.revoke'),
    cancel: t('common.cancel'),
    onConfirm: () => {
      togglePassportStatus(item);
    },
    onCancel: () => {
      setLoading(false);
      setToggleConfirm(null);
    }
  });
  const revokeInfo = (hasPermission, passport) => {
    if (user.did === session.user.did && session.user.passportId && session.user.passportId === passport.id) {
      return {
        revokable: false,
        message: t('team.passport.shouldNotDeleteCurrent')
      };
    }
    if (!hasPermission) {
      return {
        revokable: false,
        message: t('team.passport.noPermission')
      };
    }
    const isBlockletOwner = user.did === blocklet?.settings?.owner?.did;
    const isNodeOwner = user.did === nodeInfo?.nodeOwner?.did;
    if ((isBlockletOwner || isNodeOwner) && passport.name === 'owner') {
      return {
        revokable: false,
        message: t('team.passport.noPermission')
      };
    }
    return {
      revokable: true
    };
  };
  const filteredPassports = passports.filter(x => {
    if (currentState.scope) {
      return x.scope === currentState.scope;
    }
    return true;
  }).filter(x => !search || x.title.includes(search) || x.name.includes(search));
  const renderAction = (can, x) => {
    if (x.status === PASSPORT_STATUS.EXPIRED) {
      return /*#__PURE__*/_jsx(Button, {
        variant: "outlined",
        disabled: true,
        children: t('common.expired')
      });
    }
    if (revokeInfo(can, x).revokable) {
      return /*#__PURE__*/_jsxs(Button, {
        variant: "outlined",
        color: x.revoked ? 'primary' : 'secondary',
        onClick: () => confirmToggle(x),
        children: [x.revoked ? /*#__PURE__*/_jsx(AddIcon, {
          style: {
            fontSize: 16,
            marginRight: 4
          }
        }) : /*#__PURE__*/_jsx(RevokeIcon, {
          style: {
            height: 16,
            marginRight: 4
          }
        }), x.revoked ? t('common.enable') : t('common.revoke')]
      });
    }
    return /*#__PURE__*/_jsx(Tooltip, {
      title: revokeInfo(can, x).message,
      children: /*#__PURE__*/_jsx(ErrorOutlineIcon, {
        style: {
          color: theme.palette.grey[600]
        }
      })
    });
  };
  const scopeList = [{
    label: 'All',
    value: ''
  }, {
    label: 'passport',
    value: 'passport'
  }, {
    label: 'kyc',
    value: 'kyc'
  }];
  return /*#__PURE__*/_jsxs(Div, {
    children: [/*#__PURE__*/_jsxs(ListHeader, {
      children: [/*#__PURE__*/_jsx("div", {
        className: "left",
        children: /*#__PURE__*/_jsx(SearchInput, {
          placeholder: t('team.passport.search'),
          value: search,
          onChange: e => setSearch(e.target.value)
        })
      }), /*#__PURE__*/_jsx("div", {
        className: "right",
        children: enablePassportIssuance && !!user.approved && /*#__PURE__*/_jsx(Permission, {
          permission: inService ? '' : 'mutate_team',
          role: inService ? BlockletAdminRoles : [],
          children: /*#__PURE__*/_jsxs(Button, {
            size: "small",
            variant: "contained",
            color: "primary",
            "data-cy": "issue-passport",
            onClick: () => setShowIssueDialog(true),
            children: [/*#__PURE__*/_jsx(AddIcon, {
              style: {
                fontSize: 16,
                marginRight: 4
              }
            }), t('team.passport.issue')]
          })
        })
      })]
    }), /*#__PURE__*/_jsxs(Box, {
      sx: {
        mt: 3
      },
      children: [/*#__PURE__*/_jsx(RadioGroup, {
        row: true,
        children: scopeList.map(x => /*#__PURE__*/_jsx(FormControlLabel, {
          value: x.value,
          control: /*#__PURE__*/_jsx(Radio, {
            onChange: () => {
              currentState.scope = x.value;
            },
            checked: currentState.scope === x.value,
            size: "small"
          }),
          label: x.label
        }))
      }), filteredPassports.map(x => /*#__PURE__*/_jsx(Permission, {
        permission: inService ? '' : 'mutate_team',
        role: inService ? BlockletAdminRoles : [],
        children: can => /*#__PURE__*/_jsxs(Box, {
          className: "passport-item",
          sx: {
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center'
          },
          children: [/*#__PURE__*/_jsx(PassportItem, {
            passport: x,
            user: user,
            color: passportColor,
            createPassportSvg: createPassportSvg,
            icon: !!appIdList.length && !appIdList.includes(x.issuer.id) ? /*#__PURE__*/_jsx(ExternalIssuerIcon, {}) : null,
            children: !!appIdList.length && !appIdList.includes(x.issuer.id) && /*#__PURE__*/_jsxs("div", {
              className: "tip",
              children: [x.issuer.id !== teamIssuerDid && !trustedPassports.some(y => y.issuerDid === x.issuer.id) && /*#__PURE__*/_jsx(Tooltip, {
                title: t('team.passport.notTrustedIssuerTip'),
                children: /*#__PURE__*/_jsx(Box, {
                  component: ErrorOutlineIcon,
                  style: {
                    fontSize: '1.3em'
                  },
                  sx: {
                    color: 'error.main',
                    mr: 0.5
                  }
                })
              }), /*#__PURE__*/_jsx("span", {
                children: t('team.passport.issueBy', {
                  name: x.issuer.name
                })
              })]
            })
          }), /*#__PURE__*/_jsx(Box, {
            children: renderAction(can, x)
          })]
        })
      }, x.id)), !filteredPassports.length && /*#__PURE__*/_jsx(Empty, {
        children: t('common.empty')
      })]
    }), showIssueDialog && /*#__PURE__*/_jsx(IssuePassport, {
      teamDid: teamDid,
      ownerDid: user.did,
      needReceive: getWalletDid(user) === user.did,
      roles: roles,
      onCancel: () => setShowIssueDialog(false),
      onSuccess: () => {
        onCreate();
        setShowIssueDialog(false);
      },
      showOwnerPassport: blocklet && !blocklet.settings?.owner
    }), toggleConfirm && /*#__PURE__*/_jsx(Confirm, {
      title: toggleConfirm.title,
      description: toggleConfirm.description,
      confirm: toggleConfirm.confirm,
      cancel: toggleConfirm.cancel,
      params: toggleConfirm.params,
      onConfirm: toggleConfirm.onConfirm,
      onCancel: toggleConfirm.onCancel,
      color: toggleConfirm.color
    })]
  });
}
Passports.propTypes = {
  user: PropTypes.object.isRequired,
  createPassportSvg: PropTypes.func.isRequired,
  onCreate: PropTypes.func
};
const Div = styled.div`
  .passport-item {
    .MuiButton-outlinedSecondary {
      color: #f16e6e;
      fill: #f16e6e;
      background: #fcf3f3;
      border: 0;
      &:hover {
        border: 0;
      }
    }
  }
`;