import React, { useState, memo, useMemo } from 'react';
import PropTypes from 'prop-types';
import styled from '@emotion/styled';
import Box from '@mui/material/Box';
import Tooltip from '@mui/material/Tooltip';
import { ROLES } from '@abtnode/constant';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import Typography from '@arcblock/ux/lib/Typography';
import EditIcon from '@arcblock/icons/lib/EditIcon';
import LockIcon from '@arcblock/icons/lib/LockIcon';
import AddIcon from '@mui/icons-material/Add';
import useMediaQuery from '@mui/material/useMediaQuery';
import Button from '@mui/material/Button';
import trim from 'lodash/trim';
import { CopyButton } from '@arcblock/ux/lib/ClickToCopy';
import MutateRole from './mutate-role';
import { useNodeContext } from '../../contexts/node';
import { useTeamContext } from '../../contexts/team';
import { isProtectedRole, BlockletAdminRoles } from '../../util';
import Permission from '../../permission';
import Detail from './detail';

// eslint-disable-next-line react/prop-types
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
const FieldDisplay = /*#__PURE__*/memo(({
  field,
  value,
  copyable
}) => {
  const {
    local
  } = useLocaleContext();
  if (!value) return null;
  return /*#__PURE__*/_jsxs(Box, {
    onClick: e => e.stopPropagation(),
    sx: {
      display: 'flex',
      alignItems: 'center',
      gap: 1
    },
    children: [field ? /*#__PURE__*/_jsxs(Typography, {
      variant: "subtitle1",
      color: "textSecondary",
      sx: {
        width: 50,
        textAlign: 'right'
      },
      children: [field, ":"]
    }) : null, /*#__PURE__*/_jsx(Typography, {
      variant: "body1",
      children: /*#__PURE__*/_jsxs(Box, {
        sx: {
          display: 'flex',
          alignItems: 'center'
        },
        children: [/*#__PURE__*/_jsx(Tooltip, {
          title: value,
          children: /*#__PURE__*/_jsx("span", {
            className: "value-ellipsis",
            children: value
          })
        }), copyable ? /*#__PURE__*/_jsx(CopyButton, {
          content: trim(value),
          locale: local,
          style: {
            marginLeft: '4px',
            color: '#999',
            fontSize: '0.8em',
            verticalAlign: 'bottom'
          }
        }) : null]
      })
    })]
  });
});

// eslint-disable-next-line react/prop-types
const PassportItem = /*#__PURE__*/memo(({
  role = {},
  createPassportSvg,
  onUpdate,
  passportProps = {},
  actions = null
}) => {
  const {
    inService
  } = useNodeContext();
  const isMobile = useMediaQuery(x => x.breakpoints.down('md'));
  const isNotCustomRole = useMemo(() => {
    return role.name && !ROLES[role.name.toUpperCase()];
  }, [role]);
  return /*#__PURE__*/_jsxs(Box, {
    "data-cy": `passport-${role.name}`,
    className: "item",
    onClick: () => onUpdate(role),
    sx: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between'
    },
    children: [/*#__PURE__*/_jsxs(Box, {
      sx: {
        display: 'flex',
        alignItems: 'center'
      },
      children: [/*#__PURE__*/_jsx("div", {
        style: {
          width: 150
        }
        // eslint-disable-next-line react/no-danger
        ,
        dangerouslySetInnerHTML: {
          __html: createPassportSvg({
            title: role.title,
            ownerName: 'Your Name',
            width: '150px',
            ...passportProps
          })
        }
      }), /*#__PURE__*/_jsxs(Box, {
        className: "title",
        sx: {
          ml: 3
        },
        children: [/*#__PURE__*/_jsx(FieldDisplay, {
          value: role.title
        }), isNotCustomRole ? /*#__PURE__*/_jsx(FieldDisplay, {
          value: role.name,
          copyable: true
        }) : null]
      })]
    }), !isMobile && /*#__PURE__*/_jsx(Box, {
      className: "description",
      children: role.description
    }), actions || /*#__PURE__*/_jsx(Permission, {
      permission: inService ? '' : 'mutate_team',
      role: inService ? BlockletAdminRoles : [],
      children: /*#__PURE__*/_jsx("div", {
        className: "action",
        children: isProtectedRole(role.name) ? /*#__PURE__*/_jsx(LockIcon, {}) : /*#__PURE__*/_jsx(EditIcon, {})
      })
    })]
  }, role.name);
});
export default function PassportList({
  createPassportSvg
}) {
  const {
    roles,
    teamIssuerDid,
    teamName,
    refresh: refreshTeam,
    passportColor,
    teamDid,
    isNodeTeam
  } = useTeamContext();
  const {
    t
  } = useLocaleContext();
  const [showCreate, setShowCreate] = useState(false);
  const [updateForm, setUpdateForm] = useState(false);
  return /*#__PURE__*/_jsxs(Div, {
    sx: {
      mt: 0
    },
    children: [/*#__PURE__*/_jsx(Box, {
      sx: {
        display: 'flex',
        justifyContent: 'flex-end'
      },
      children: !isNodeTeam && /*#__PURE__*/_jsxs(Button, {
        variant: "contained",
        edge: "end",
        color: "primary",
        "data-cy": "create-role",
        onClick: () => setShowCreate(true),
        children: [/*#__PURE__*/_jsx(AddIcon, {
          style: {
            fontSize: 16,
            marginRight: 4
          }
        }), t('team.passport.create.title')]
      })
    }), /*#__PURE__*/_jsx(Box, {
      className: "list",
      children: roles.map(role => /*#__PURE__*/_jsx(PassportItem, {
        role: role,
        createPassportSvg: createPassportSvg,
        onUpdate: setUpdateForm,
        passportProps: {
          issuer: teamName,
          issuerDid: teamIssuerDid,
          ownerDid: teamIssuerDid,
          preferredColor: passportColor
        }
      }))
    }), updateForm && /*#__PURE__*/_jsx(Detail, {
      onCancel: () => setUpdateForm(false),
      onSuccess: () => {
        setUpdateForm(false);
        refreshTeam();
      },
      onDelete: () => {
        setUpdateForm(false);
        refreshTeam();
      },
      mode: "update",
      roleName: updateForm.name,
      item: updateForm
    }), showCreate && /*#__PURE__*/_jsx(MutateRole, {
      teamDid: teamDid,
      onCancel: () => setShowCreate(false),
      onSuccess: () => {
        setShowCreate(false);
        refreshTeam();
      }
    })]
  });
}
export { FieldDisplay, PassportItem };
export const Div = styled(Box)`
  .list {
    .item {
      padding: 12px;
      margin: 12px -12px;
      cursor: pointer;
      transition: box-shadow 0.4s;
      &:hover {
        box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1);
      }

      .value-ellipsis {
        display: inline-block;
        max-width: 290px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .title {
      font-weight: 400;
      font-size: 18px;
      line-height: 21px;
      color: ${({
  theme
}) => theme.palette.text.primary};
    }

    .description {
      flex: 1;
      margin-left: 24px;
      margin-right: 24px;
      color: ${({
  theme
}) => theme.palette.text.secondary};
    }

    .action {
      fill: ${({
  theme
}) => theme.palette.text.secondary};
    }
  }
`;
PassportList.propTypes = {
  createPassportSvg: PropTypes.func.isRequired
};