import { useRef } from 'react';
import { Box, Button, Chip, IconButton, Tooltip } from '@mui/material';
import { useMemoizedFn, useRequest } from 'ahooks';
import Datatable from '@arcblock/ux/lib/Datatable';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import { useConfirm } from '@arcblock/ux/lib/Dialog';
import { Icon } from '@iconify/react';
import iconDeleteRounded from '@iconify-icons/material-symbols/delete-rounded';
import iconEditRounded from '@iconify-icons/material-symbols/edit-rounded';
import iconPreview from '@iconify-icons/material-symbols/preview';
import iconLockOutline from '@iconify-icons/material-symbols/lock-outline';
import { WHO_CAN_ACCESS } from '@abtnode/constant';
import Toast from '@arcblock/ux/lib/Toast';
import omit from 'lodash/omit';
import sortBy from 'lodash/sortBy';
import { useBlockletContext } from '../../contexts/blocklet';
import { useNodeContext } from '../../contexts/node';
import BlockletAccessPolicyItemDialog from './access-policy-item-dialog';
import { useTeamContext } from '../../contexts/team';
import { formartAccessPolicyParams } from './utils';
import { echoError } from './dom-utils';
import AccessConfig from '../../who-can-access/config';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default function BlockletAccessPolicy() {
  const {
    t,
    locale
  } = useLocaleContext();
  const {
    blocklet
  } = useBlockletContext();
  const {
    api
  } = useNodeContext();
  const {
    roles: roleList
  } = useTeamContext();
  const did = blocklet?.meta?.did;
  const datatableRef = useRef(null);
  const dialogRef = useRef(null);
  const {
    confirmApi,
    confirmHolder
  } = useConfirm();
  const onTableChange = () => {};
  const dataState = useRequest(async () => {
    const {
      accessPolicies
    } = await api.getBlockletAccessPolicies({
      input: {
        did
      }
    });
    return sortBy(accessPolicies, x => x.isProtected ? 1 : 0);
  });
  const dataList = dataState.data || [];
  const handleItemAdd = useMemoizedFn(() => {
    dialogRef.current.open((data, close) => {
      echoError(async () => {
        await api.addBlockletAccessPolicy({
          input: {
            did,
            data
          }
        });
        Toast.success(t('common.succeeded'));
        dataState.run();
        close();
      });
    });
  });
  const handleItemEdit = useMemoizedFn(dataItem => {
    dialogRef.current.open((data, close) => {
      echoError(async () => {
        await api.updateBlockletAccessPolicy({
          input: {
            did,
            data: {
              ...data,
              id: dataItem.id
            }
          }
        });
        Toast.success(t('common.succeeded'));
        dataState.run();
        close();
      });
    }, dataItem);
  });
  const handleItemView = useMemoizedFn(dataItem => {
    dialogRef.current.open((_, close) => {
      close();
    }, omit(dataItem, ['id']));
  });
  const handleItemDelete = useMemoizedFn(dataItem => {
    confirmApi.open({
      title: t('accessPolicy.delete.title'),
      content: t('accessPolicy.delete.description'),
      confirmButtonText: t('common.confirm'),
      confirmButtonProps: {
        color: 'error'
      },
      cancelButtonText: t('common.cancel'),
      onConfirm(close) {
        echoError(async () => {
          await api.deleteBlockletAccessPolicy({
            input: {
              did,
              id: dataItem.id
            }
          });
          Toast.success(t('common.succeeded'));
          dataState.run();
          close();
        });
      }
    });
  });
  const tableOptions = {
    sort: false,
    download: false,
    filter: false,
    print: false,
    search: false,
    viewColumns: false,
    expandableRowsOnClick: true,
    searchDebounceTime: 600,
    onRowClick(row, {
      dataIndex
    }, e) {
      if (datatableRef.current?.contains(e.target)) {
        const dataItem = dataList[dataIndex];
        handleItemView(dataItem);
      }
    }
  };
  const customButtons = [/*#__PURE__*/_jsx(Button, {
    size: "small",
    variant: "outlined",
    onClick: () => {
      dataState.run();
    },
    sx: {
      mr: 1
    },
    children: t('common.refresh')
  }, "refresh"), /*#__PURE__*/_jsx(Button, {
    size: "small",
    variant: "contained",
    onClick: handleItemAdd,
    children: t('common.add')
  })];
  const columns = [{
    label: t('accessPolicy.form.name'),
    name: 'name',
    options: {
      // eslint-disable-next-line react/no-unstable-nested-components
      customBodyRenderLite(rowIndex) {
        const dataItem = dataList[rowIndex];
        const protectedEle = dataItem.isProtected ? /*#__PURE__*/_jsx(Tooltip, {
          title: "Built-in policy, can't edit",
          children: /*#__PURE__*/_jsx(Box, {
            component: Icon,
            icon: iconLockOutline,
            sx: {
              fontSize: 16
            }
          })
        }) : null;
        return /*#__PURE__*/_jsxs(Box, {
          sx: {
            display: 'flex',
            alignItems: 'center',
            gap: 0.5
          },
          children: [protectedEle, " ", dataItem.name]
        });
      }
    }
  }, {
    label: t('accessPolicy.form.roles'),
    name: 'roles',
    options: {
      // eslint-disable-next-line react/no-unstable-nested-components
      customBodyRenderLite(rowIndex) {
        const dataItem = dataList[rowIndex];
        const formatDataItem = formartAccessPolicyParams(dataItem);
        // WHO_CAN_ACCESS.OWNER, WHO_CAN_ACCESS.ADMIN 这两种角色还是需要展示具体的 role，否则怕用户分不清
        if ([WHO_CAN_ACCESS.ALL, WHO_CAN_ACCESS.INVITED].includes(formatDataItem.whoCanAccess)) {
          const configItem = AccessConfig.find(x => x.value === formatDataItem.whoCanAccess);
          return configItem.title?.[locale] || configItem.title?.en;
        }
        const roles = roleList.filter(x => {
          if (dataItem.reverse) {
            return !formatDataItem.roles?.includes(x.name);
          }
          return formatDataItem.roles?.includes(x.name);
        });
        return /*#__PURE__*/_jsx(Box, {
          sx: {
            display: 'flex',
            gap: 1,
            flexWrap: 'wrap'
          },
          children: roles.map(item => {
            return /*#__PURE__*/_jsx(Tooltip, {
              title: item.description,
              children: /*#__PURE__*/_jsx(Chip, {
                size: "small",
                label: item.title
              }, item.name)
            });
          })
        });
      }
    }
  }, {
    label: t('accessPolicy.form.description'),
    name: 'description'
  }, {
    label: t('common.actions'),
    name: '',
    width: 100,
    align: 'center',
    verticalKeyAlign: 'center',
    options: {
      // eslint-disable-next-line react/no-unstable-nested-components
      customBodyRenderLite(rowIndex) {
        const dataItem = dataList[rowIndex];
        return /*#__PURE__*/_jsxs(Box, {
          sx: {
            display: 'flex',
            alignItems: 'center',
            gap: 0
          },
          onClick: e => e.stopPropagation(),
          children: [dataItem.isProtected ? /*#__PURE__*/_jsx(Tooltip, {
            title: t('common.view'),
            children: /*#__PURE__*/_jsx(IconButton, {
              size: "small",
              onClick: () => {
                handleItemView(dataItem, rowIndex);
              },
              children: /*#__PURE__*/_jsx(Icon, {
                icon: iconPreview,
                fontSize: 18
              })
            })
          }) : null, dataItem.isProtected ? null : /*#__PURE__*/_jsx(Tooltip, {
            title: t('common.edit'),
            children: /*#__PURE__*/_jsx(IconButton, {
              size: "small",
              onClick: () => {
                handleItemEdit(dataItem, rowIndex);
              },
              color: "success",
              children: /*#__PURE__*/_jsx(Icon, {
                icon: iconEditRounded,
                fontSize: 18
              })
            })
          }), dataItem.isProtected ? null : /*#__PURE__*/_jsx(Tooltip, {
            title: t('common.delete'),
            children: /*#__PURE__*/_jsx(IconButton, {
              size: "small",
              onClick: () => {
                handleItemDelete(dataItem, rowIndex);
              },
              color: "error",
              children: /*#__PURE__*/_jsx(Icon, {
                icon: iconDeleteRounded,
                fontSize: 18
              })
            })
          })]
        });
      }
    }
  }].filter(Boolean);
  return /*#__PURE__*/_jsxs(Box, {
    sx: {
      display: 'flex',
      flexDirection: 'column',
      gap: 2
    },
    ref: datatableRef,
    children: [/*#__PURE__*/_jsx(Datatable, {
      verticalKeyWidth: 100,
      locale: locale,
      title: t('accessPolicy.title'),
      data: dataList,
      columns: columns,
      customButtons: customButtons,
      options: tableOptions,
      loading: dataState.loading,
      onChange: onTableChange
    }), /*#__PURE__*/_jsx(BlockletAccessPolicyItemDialog, {
      ref: dialogRef
    }), confirmHolder]
  });
}