/**
 * Org 列表，table 布局
 */
/* eslint-disable jsx-a11y/no-access-key */
/* eslint-disable react/no-unstable-nested-components */
import { useContext, useRef, useState, useEffect } from 'react';
import { useRequest, useReactive } from 'ahooks';
import Datatable, { getDurableData } from '@arcblock/ux/lib/Datatable';
import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
import { Box, Button } from '@mui/material';
import Toast from '@arcblock/ux/lib/Toast';
import DeleteIcon from '@mui/icons-material/Delete';
import EditIcon from '@mui/icons-material/Edit';
import UserCard from '@arcblock/ux/lib/UserCard';
import { CardType, InfoType } from '@arcblock/ux/lib/UserCard/types';
import RelativeTime from '@arcblock/ux/lib/RelativeTime';
import Dialog from '@arcblock/ux/lib/Dialog';
import { useTeamContext } from '../../../contexts/team';
import { formatError } from '../../../util';
import useMobile from '../../../hooks/use-mobile';
import Actions from '../../../actions';
import MembersAvatarGroup from '../avatar-group';
import OrgDetail from '../detail/index';
import { useOrgsContext } from '../context';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default function OrgsTable() {
  const {
    t,
    locale
  } = useContext(LocaleContext);
  const {
    teamDid
  } = useTeamContext();
  const datatableRef = useRef(null);
  const [detailOrg, setDetailOrg] = useState(null);
  const [rowCount, setRowCount] = useState(0);
  const isMobile = useMobile();
  const durableKey = `orgs-${teamDid}`;
  const tableDurableData = getDurableData(durableKey);
  const listSearch = useReactive({
    searchText: tableDurableData.searchText || '',
    pageSize: tableDurableData.rowsPerPage || 10,
    page: 1
  });
  const {
    editable,
    loading,
    requests,
    onTriggerEditOrg,
    onTriggerCreateOrg,
    refreshTrigger
  } = useOrgsContext();
  const {
    data,
    refresh
  } = useRequest(async () => {
    const org = {};
    if (listSearch.searchText) {
      org.name = listSearch.searchText;
      org.description = listSearch.searchText;
    }
    const {
      orgs,
      paging
    } = await requests.getAllOrgs({
      org,
      paging: {
        page: listSearch.page,
        pageSize: listSearch.pageSize
      }
    });
    setRowCount(paging.total);
    return orgs;
  }, {
    refreshDeps: [teamDid, listSearch.page, listSearch.pageSize, listSearch.searchText],
    onError: error => {
      Toast.error(formatError(error));
    }
  });
  const onTableChange = ({
    page,
    rowsPerPage,
    searchText
  }) => {
    if (listSearch.pageSize !== rowsPerPage) {
      listSearch.pageSize = rowsPerPage;
      listSearch.page = 1;
    } else if (listSearch.page !== page + 1) {
      listSearch.page = page + 1;
    } else if (listSearch.searchText !== searchText) {
      listSearch.searchText = searchText;
      listSearch.page = 1;
    }
  };
  useEffect(() => {
    if (refreshTrigger > 0 && refresh) {
      refresh();
    }
  }, [refreshTrigger, refresh]);
  const columns = [{
    label: t('common.orgs'),
    name: 'name'
  }, {
    label: t('common.members'),
    name: 'members',
    options: {
      customBodyRender: (_, {
        rowIndex
      }) => {
        const item = data[rowIndex];
        return /*#__PURE__*/_jsx(MembersAvatarGroup, {
          members: item.members,
          total: item.membersCount
        });
      }
    }
  }, {
    label: t('team.orgs.description'),
    name: 'description'
  }, {
    label: t('common.createdBy'),
    name: 'owner',
    options: {
      customBodyRender: (_, {
        rowIndex
      }) => {
        const item = data[rowIndex];
        return /*#__PURE__*/_jsx(Box, {
          children: /*#__PURE__*/_jsx(UserCard, {
            showHoverCard: false,
            avatarSize: 32,
            did: item.ownerDid,
            cardType: CardType.Detailed,
            infoType: InfoType.Minimal,
            sx: {
              border: 0,
              padding: 0,
              ...(isMobile && {
                minWidth: 'unset'
              })
            }
          })
        });
      }
    }
  }, {
    label: t('common.createdAt'),
    name: 'createdAt',
    options: {
      customBodyRender: value => {
        return /*#__PURE__*/_jsx(Box, {
          children: value ? /*#__PURE__*/_jsx(RelativeTime, {
            value: value,
            locale: locale
          }) : '-'
        });
      }
    }
  }, editable && {
    label: t('common.actions'),
    name: 'actions',
    width: 100,
    align: 'center',
    verticalKeyAlign: 'center',
    options: {
      customBodyRender: (_, {
        rowIndex
      }) => {
        const item = data[rowIndex];
        return /*#__PURE__*/_jsx(Box, {
          children: /*#__PURE__*/_jsx(Actions, {
            "data-cy": "orgs-table-actions",
            actions: [{
              icon: /*#__PURE__*/_jsx(EditIcon, {}),
              text: t('common.edit'),
              onClick: e => {
                e.stopPropagation();
                onTriggerEditOrg(item);
              }
            }, {
              icon: /*#__PURE__*/_jsx(DeleteIcon, {}),
              text: t('common.delete'),
              onClick: e => {
                e.stopPropagation();
                requests.deleteOrg(item);
              }
            }]
          })
        });
      }
    }
  }];
  const tableOptions = {
    sort: false,
    download: false,
    filter: false,
    print: false,
    expandableRowsOnClick: true,
    onRowClick(row, meta, e) {
      if (datatableRef.current?.contains(e.target)) {
        const item = data[meta.dataIndex];
        setDetailOrg(item);
      }
    },
    page: listSearch.page - 1,
    rowsPerPage: listSearch.pageSize,
    count: rowCount,
    searchDebounceTime: 600
  };
  const customButtons = editable ? [/*#__PURE__*/_jsx(Button, {
    variant: "contained",
    size: "small",
    onClick: () => {
      onTriggerCreateOrg();
    },
    children: t('common.create')
  }, "add")] : [];
  return /*#__PURE__*/_jsxs(Box, {
    children: [/*#__PURE__*/_jsx("div", {
      ref: datatableRef,
      className: "orgs-table",
      children: /*#__PURE__*/_jsx(Datatable, {
        className: "orgs-table",
        verticalKeyWidth: 100,
        loading: loading,
        columns: columns,
        data: data || [],
        locale: locale,
        durable: durableKey,
        durableKeys: ['page', 'rowsPerPage'],
        customButtons: customButtons,
        options: tableOptions,
        onChange: onTableChange
      })
    }), detailOrg && /*#__PURE__*/_jsx(Dialog, {
      fullWidth: true,
      maxWidth: "lg",
      title: detailOrg.name,
      open: !!detailOrg,
      onClose: () => setDetailOrg(null),
      sx: {
        '.MuiDialogContent-root': {
          pt: 0
        }
      },
      children: /*#__PURE__*/_jsx(OrgDetail, {
        id: detailOrg.id,
        inDialog: true
      })
    })]
  });
}