/* eslint-disable prettier/prettier */
import React from 'react';
import PropTypes from 'prop-types';
import styled from '@emotion/styled';
import upperFirst from 'lodash/upperFirst';
import Box from '@mui/material/Box';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import NFTDisplay from '@arcblock/ux/lib/NFTDisplay';
import RevokeIcon from '@arcblock/icons/lib/RevokeIcon';
import { formatToDatetime } from '../../util';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default function PassportItem({
  passport,
  user,
  color,
  width = 150,
  icon = null,
  children = null,
  createPassportSvg,
  ...rest
}) {
  const {
    t,
    locale
  } = useLocaleContext();
  return /*#__PURE__*/_jsxs(Root, {
    display: "flex",
    alignItems: "center",
    ...rest,
    children: [!!passport.display && /*#__PURE__*/_jsx("div", {
      className: "passport-item__display",
      style: {
        width
      },
      children: /*#__PURE__*/_jsx(NFTDisplay, {
        address: passport.id,
        data: passport.display,
        style: {
          width: '100%'
        },
        imageFilter: typeof width === 'number' ? {
          imageFilter: 'resize',
          w: width
        } : null
      })
    }), !passport.display && /*#__PURE__*/_jsx("div", {
      // eslint-disable-next-line react/no-danger
      dangerouslySetInnerHTML: {
        __html: createPassportSvg({
          scope: passport.scope,
          role: passport.role,
          title: passport.scope === 'kyc' ? passport.name : passport.title,
          issuer: passport.issuer && passport.issuer.name,
          issuerDid: passport.issuer && passport.issuer.id,
          ownerName: user.fullName,
          ownerDid: user.did,
          ownerAvatarUrl: user.avatar,
          revoked: passport.revoked,
          preferredColor: color,
          width,
          extra: passport.scope === 'kyc' ? {
            key: 'Email',
            value: passport.name
          } : undefined
        })
      }
    }), /*#__PURE__*/_jsxs("div", {
      className: "body",
      children: [/*#__PURE__*/_jsxs(Box, {
        className: "title",
        sx: {
          display: 'flex',
          alignItems: 'center'
        },
        children: [upperFirst(passport.title), /*#__PURE__*/_jsxs("div", {
          className: "status-icons",
          children: [icon, passport.revoked && /*#__PURE__*/_jsx(RevokeIcon, {})]
        })]
      }), passport.issuanceDate && /*#__PURE__*/_jsx(Box, {
        className: "title",
        sx: {
          display: 'flex',
          alignItems: 'center'
        },
        children: t('team.passport.issuanceDate', {
          date: formatToDatetime(passport.issuanceDate, locale)
        })
      }), passport.expirationDate && /*#__PURE__*/_jsx(Box, {
        className: "title",
        sx: {
          display: 'flex',
          alignItems: 'center'
        },
        children: t('team.passport.validUntil', {
          date: formatToDatetime(passport.expirationDate, locale)
        })
      }), children]
    })]
  });
}
PassportItem.propTypes = {
  passport: PropTypes.any.isRequired,
  user: PropTypes.any.isRequired,
  color: PropTypes.string.isRequired,
  createPassportSvg: PropTypes.func.isRequired,
  icon: PropTypes.any,
  children: PropTypes.any,
  width: PropTypes.number
};
const Root = styled(Box)`
  .body {
    padding: 0;
    margin-left: 24px;
    margin-top: 0;
  }
  .title {
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    color: ${({
  theme
}) => theme.palette.text.primary};
    margin-bottom: 8px;
  }
  .tip {
    display: flex;
    align-items: center;
    font-size: 14px;
    margin-top: 6px;
    color: ${({
  theme
}) => theme.palette.text.secondary};
  }
  .status-icons {
    svg {
      fill: ${({
  theme
}) => theme.palette.text.secondary};
      height: 1.2em;
      margin-left: 0.4em;
    }
  }
`;