/**
 * Org 卡片项
 */
import React, { useMemo } from 'react';
import PropTypes from 'prop-types';
import { useMemoizedFn } from 'ahooks';
import { Box, Typography, Button, Chip, Stack, Card, CardHeader, CardContent, Skeleton } from '@mui/material';
import { styled } from '@mui/material/styles';
import { People as PeopleIcon, Delete as DeleteIcon, PersonAdd as PersonAddIcon } from '@mui/icons-material';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import noop from 'lodash/noop';
import { useSessionContext } from '../../../contexts/session';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
export default function OrgCardItem({
  org,
  onInviteUser = noop,
  onDelete = noop,
  onClick = noop,
  loading = false,
  editable = true
}) {
  const {
    t
  } = useLocaleContext();
  const {
    session
  } = useSessionContext();
  const isOwner = useMemo(() => {
    return session?.user?.did === org.ownerDid;
  }, [session?.user?.did, org.ownerDid]);
  const renderActions = () => {
    if (editable) {
      return /*#__PURE__*/_jsxs(_Fragment, {
        children: [/*#__PURE__*/_jsx(ButtonWrapper, {
          variant: "outlined",
          size: "small",
          startIcon: /*#__PURE__*/_jsx(PersonAddIcon, {
            style: {
              fontSize: 16
            }
          }),
          onClick: e => {
            e.stopPropagation();
            onInviteUser?.(org);
          },
          children: t('common.invite')
        }), /*#__PURE__*/_jsx(ButtonWrapper, {
          variant: "contained",
          color: "error",
          size: "small",
          startIcon: /*#__PURE__*/_jsx(DeleteIcon, {
            style: {
              fontSize: 16
            }
          }),
          onClick: e => {
            e.stopPropagation();
            onDelete?.(org);
          },
          children: t('common.delete')
        })]
      });
    }
    return null;
  };
  const renderOwnerChip = useMemoizedFn(() => {
    if (isOwner) {
      return null;
    }
    if (org?.passports?.length > 0) {
      return /*#__PURE__*/_jsx(Chip, {
        label: org.passports[0].title,
        size: "small"
      });
    }
    return null;
  });
  return /*#__PURE__*/_jsx(Stack, {
    sx: {
      flexDirection: {
        xs: 'column',
        md: 'row'
      },
      gap: {
        xs: 2,
        md: 2
      },
      cursor: 'pointer',
      minWidth: 300
    },
    onClick: () => onClick?.(org),
    children: /*#__PURE__*/_jsxs(Card, {
      sx: {
        boxShadow: 1,
        border: '1px solid',
        borderColor: 'divider',
        backgroundColor: 'background.default',
        flex: 1,
        display: 'flex',
        flexDirection: 'column'
      },
      children: [/*#__PURE__*/_jsx(CardHeader, {
        title: /*#__PURE__*/_jsxs(Stack, {
          direction: "row",
          spacing: 1,
          sx: {
            alignItems: 'center',
            justifyContent: 'space-between'
          },
          children: [loading ? /*#__PURE__*/_jsx(Skeleton, {
            variant: "text",
            width: "100%",
            height: 24
          }) : /*#__PURE__*/_jsx(Typography, {
            variant: "h4",
            sx: {
              fontWeight: 600
            },
            children: org.name
          }), loading ? /*#__PURE__*/_jsx(Skeleton, {
            variant: "text",
            width: 50,
            height: 24
          }) : renderOwnerChip()]
        }),
        sx: {
          pb: 2
        }
      }), /*#__PURE__*/_jsxs(CardContent, {
        sx: {
          pt: 0,
          flex: 1,
          display: 'flex',
          flexDirection: 'column',
          gap: 1,
          '&.MuiCardContent-root': {
            pb: 2
          }
        },
        children: [/*#__PURE__*/_jsx(Typography, {
          variant: "body2",
          sx: {
            color: 'text.secondary',
            overflow: 'hidden',
            display: '-webkit-box',
            WebkitLineClamp: 3,
            WebkitBoxOrient: 'vertical',
            height: 56
          },
          children: loading ? /*#__PURE__*/_jsxs(_Fragment, {
            children: [/*#__PURE__*/_jsx(Skeleton, {
              variant: "text",
              width: "100%",
              height: 24
            }), /*#__PURE__*/_jsx(Skeleton, {
              variant: "text",
              width: "80%",
              height: 24
            })]
          }) : org.description
        }), /*#__PURE__*/_jsxs(Box, {
          sx: {
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center'
          },
          children: [loading ? /*#__PURE__*/_jsx(Skeleton, {
            variant: "text",
            width: "30%",
            height: 24
          }) : /*#__PURE__*/_jsxs(Box, {
            sx: {
              display: 'flex',
              alignItems: 'center',
              gap: 0.5,
              color: 'text.secondary',
              fontSize: 14
            },
            children: [/*#__PURE__*/_jsx(PeopleIcon, {
              sx: {
                fontSize: '18px'
              }
            }), /*#__PURE__*/_jsxs("span", {
              children: [org.membersCount || org.members?.length || 1, " ", t('team.orgs.members')]
            })]
          }), /*#__PURE__*/_jsx(Box, {
            sx: {
              display: 'flex',
              alignItems: 'center',
              gap: 1
            },
            children: loading ? /*#__PURE__*/_jsxs(_Fragment, {
              children: [/*#__PURE__*/_jsx(Skeleton, {
                variant: "text",
                width: 50,
                height: 24
              }), /*#__PURE__*/_jsx(Skeleton, {
                variant: "text",
                width: 50,
                height: 24
              })]
            }) : renderActions()
          })]
        })]
      })]
    })
  });
}
OrgCardItem.propTypes = {
  org: PropTypes.object.isRequired,
  onInviteUser: PropTypes.func,
  onDelete: PropTypes.func,
  onClick: PropTypes.func,
  loading: PropTypes.bool,
  editable: PropTypes.bool
};
const ButtonWrapper = styled(Button)`
  font-weight: 500;
  .MuiButton-icon {
    margin-right: 4px;
  }
`;

/**
 * {
 *  id: string;
 *  name: string;
 *  description: string;
 *  createdAt: string;
 *  updatedAt: string;
 *  ownerDid: string;
 *  owner: Object; // User
 *  members: Object[];
 *  membersCount: number;
 * }
 */