/* eslint-disable react/no-unstable-nested-components */
import { getDurableData } from '@arcblock/ux/lib/Datatable';
import Tooltip from '@mui/material/Tooltip';
import Box from '@mui/material/Box';
import Chip from '@mui/material/Chip';
import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';
import Alert from '@mui/material/Alert';
import CircularProgress from '@mui/material/CircularProgress';
import Typography from '@mui/material/Typography';
import { useLocalStorageState, useRequest } from 'ahooks';
import React, { useState, useEffect, useCallback } from 'react';
import { Edit, Delete } from '@mui/icons-material';
import Toast from '@arcblock/ux/lib/Toast';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
import AddIcon from '@mui/icons-material/Add';
import UserCard from '@arcblock/ux/lib/UserCard';
import { CardType, InfoType } from '@arcblock/ux/lib/UserCard/types';
import SwitchWithLabel from '../../switch';
import { useNodeContext } from '../../contexts/node';
import { useTeamContext } from '../../contexts/team';
import useMobile from '../../hooks/use-mobile';
import WebhookCreateOrEdit from './create-or-edit';
import WebhookDetailModal from './detail';
import Confirm from '../../confirm';
import Table from './components/table';
import Actions from '../../actions';
import WebhookTip from '../table-tips';
import { formatTime } from './util';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default function WebhookEndpoint() {
  const {
    teamDid
  } = useTeamContext();
  const isMobile = useMobile();
  const listKey = `webhook-endpoints-${teamDid}`;
  const persisted = getDurableData(listKey);
  const {
    t,
    locale
  } = useLocaleContext();
  const {
    api
  } = useNodeContext();
  const [searchText, setSearchText] = useState('');
  const [modalState, setModalState] = useState({
    webhookDetail: {
      open: false,
      id: null
    },
    createEdit: {
      open: false,
      id: null,
      url: '',
      description: '',
      enabledEvents: []
    },
    deleteConfirm: null
  });
  const [search, setSearch] = useLocalStorageState(listKey, {
    defaultValue: {
      pageSize: persisted.rowsPerPage || 20,
      page: persisted.page ? persisted.page + 1 : 1
    }
  });
  const {
    loading,
    error,
    data,
    refresh
  } = useRequest(() => api.getWebhookEndpoints({
    input: {
      teamDid,
      paging: {
        page: search.page,
        pageSize: search.pageSize
      }
    }
  }));
  useEffect(() => {
    refresh();
  }, [search, refresh]);
  const handleStatusUpdate = useCallback(async (item, isActive) => {
    try {
      await api.updateWebhookEndpoint({
        input: {
          teamDid,
          id: item.id,
          data: {
            status: isActive ? 'disabled' : 'enabled'
          }
        }
      });
      refresh();
      Toast.success(`${isActive ? t('webhookEndpoint.disable') : t('webhookEndpoint.enable')}${t('webhookEndpoint.success')}`);
    } catch (err) {
      Toast.error(err?.message);
    }
  }, [api, teamDid, refresh, t]);
  const handleDelete = useCallback(async id => {
    try {
      await api.deleteWebhookEndpoint({
        input: {
          teamDid,
          id
        }
      });
      refresh();
      setModalState(prev => ({
        ...prev,
        deleteConfirm: null
      }));
      Toast.success(`${t('common.delete')}${t('webhookEndpoint.success')}`);
    } catch (err) {
      Toast.error(err?.message);
    }
  }, [api, teamDid, refresh, t]);
  const onChange = (e, type) => {
    let page = e.page + 1;
    const newSearchText = e.searchText || '';
    if (newSearchText !== searchText) {
      setSearchText(newSearchText);
      return;
    }
    if (type === 'changePage' || type === 'changeRowsPerPage') {
      if (type !== 'changePage') {
        page = 1;
      }
      const newPaging = {
        page,
        pageSize: e.rowsPerPage
      };
      setSearchText('');
      setSearch(newPaging);
    }
  };
  if (error) {
    return /*#__PURE__*/_jsx(Alert, {
      severity: "error",
      children: error.message
    });
  }
  const filter = (data?.list || []).filter(item => {
    if (!searchText) return true;
    const text = searchText.toLowerCase();
    return item.description.toLowerCase().includes(text) || item.url.toLowerCase().includes(text);
  });
  const columns = [{
    label: 'URL',
    name: 'url',
    options: {
      customBodyRenderLite: (_, index) => {
        const item = filter[index];
        return /*#__PURE__*/_jsxs(Box, {
          sx: {
            display: 'flex',
            alignItems: 'center',
            cursor: 'pointer',
            gap: 0.5
          },
          children: [/*#__PURE__*/_jsx(Typography, {
            variant: "body2",
            children: item.description
          }), /*#__PURE__*/_jsx(Box, {
            sx: {
              display: 'flex'
            },
            onClick: e => {
              e.stopPropagation();
            },
            children: /*#__PURE__*/_jsx(Tooltip, {
              title: item.url,
              children: /*#__PURE__*/_jsx(InfoOutlinedIcon, {
                sx: {
                  fontSize: '15px',
                  marginTop: '1px'
                }
              })
            })
          })]
        });
      }
    }
  }, {
    label: 'Events',
    name: 'events',
    options: {
      customBodyRenderLite: (_, index) => {
        const item = filter[index];
        return /*#__PURE__*/_jsx(Box, {
          sx: {
            display: 'flex',
            alignItems: 'center',
            gap: 1,
            flexWrap: 'wrap'
          },
          children: item.enabledEvents.map(event => /*#__PURE__*/_jsx(Chip, {
            size: "small",
            variant: "filled",
            label: event.type,
            sx: {
              borderRadius: '4px',
              textTransform: 'capitalize'
            }
          }, `${item.source}-${event.type}`))
        });
      }
    }
  }, {
    label: t('common.status'),
    name: 'status',
    options: {
      customBodyRenderLite: (_, index) => {
        const item = filter[index];
        const isActive = item?.status === 'enabled';
        return /*#__PURE__*/_jsx(Box, {
          onClick: e => e.stopPropagation(),
          children: /*#__PURE__*/_jsx(SwitchWithLabel, {
            checked: isActive,
            onChange: () => handleStatusUpdate(item, isActive)
          }, `status-${item.status}`)
        });
      }
    }
  }, {
    label: t('common.createdAt'),
    name: 'createdAt',
    minWidth: 200,
    options: {
      customBodyRender: e => {
        return formatTime(e);
      }
    }
  }, {
    label: t('common.createdBy'),
    name: 'createUser',
    width: 100,
    options: {
      customBodyRender: value => {
        if (!value) {
          return '-';
        }
        return /*#__PURE__*/_jsx(UserCard, {
          showDid: true,
          did: value?.did,
          cardType: CardType.Detailed,
          infoType: InfoType.Minimal,
          sx: {
            border: 0,
            padding: 0
          }
        });
      }
    }
  }, {
    label: t('common.actions'),
    name: 'actions',
    width: 100,
    align: 'center',
    verticalKeyAlign: 'center',
    options: {
      customBodyRenderLite: (_, index) => {
        const item = filter[index];
        return /*#__PURE__*/_jsx(Actions, {
          actions: [{
            icon: /*#__PURE__*/_jsx(Edit, {}),
            text: t('common.edit'),
            onClick: e => {
              e.stopPropagation();
              setModalState(prev => ({
                ...prev,
                createEdit: {
                  open: true,
                  id: item.id,
                  url: item.url,
                  description: item.description,
                  enabledEvents: item.enabledEvents
                }
              }));
            }
          }, {
            icon: /*#__PURE__*/_jsx(Delete, {}),
            text: t('common.delete'),
            onClick: e => {
              e.stopPropagation();
              setModalState(prev => ({
                ...prev,
                deleteConfirm: {
                  title: t('webhookEndpoint.deleteWebhook.title'),
                  description: t('webhookEndpoint.deleteWebhook.description'),
                  confirm: t('common.confirm'),
                  cancel: t('common.cancel'),
                  onConfirm: () => handleDelete(item.id),
                  onCancel: () => setModalState(prev1 => ({
                    ...prev1,
                    deleteConfirm: null
                  }))
                }
              }));
            }
          }]
        });
      }
    }
  }];
  return /*#__PURE__*/_jsxs(Box, {
    sx: {
      '.custom-toobar-btns': {
        gap: '8px'
      },
      '.custom-toobar-title .custom-toobar-title-inner>span': {
        display: 'flex',
        alignItems: 'center',
        'white-space': 'inherit',
        height: '100%'
      }
    },
    children: [!isMobile ? null : /*#__PURE__*/_jsx(WebhookTip, {
      title: t('webhookEndpoint.listTitle'),
      tooltipTitle: t('webhookEndpoint.tooltipTitle'),
      link: `https://www.arcblock.io/docs/blocklet-developer/${locale}/webhook`
    }), /*#__PURE__*/_jsx(Table, {
      durable: listKey,
      durableKeys: ['page', 'rowsPerPage'],
      data: filter,
      columns: columns,
      options: {
        count: data?.count || 0,
        page: search.page - 1,
        rowsPerPage: search.pageSize,
        viewColumns: false,
        onRowClick: (_, {
          dataIndex
        }) => {
          const item = data.list[dataIndex];
          setModalState(prev => ({
            ...prev,
            webhookDetail: {
              open: true,
              id: item.id
            }
          }));
        }
      },
      loading: loading || !data,
      onChange: onChange,
      emptyNodeText: /*#__PURE__*/_jsx(Stack, {
        sx: {
          gap: 1
        },
        children: t('webhookEndpoint.noWebhooksAdded')
      }),
      title: isMobile ? null : /*#__PURE__*/_jsx(WebhookTip, {
        title: t('webhookEndpoint.listTitle'),
        tooltipTitle: t('webhookEndpoint.tooltipTitle'),
        link: `https://www.arcblock.io/docs/blocklet-developer/${locale}/webhook`
      }),
      customButtons: [/*#__PURE__*/_jsxs(Button, {
        edge: "end",
        variant: "contained",
        color: "primary",
        onClick: () => setModalState(prev => ({
          ...prev,
          createEdit: {
            ...prev.createEdit,
            open: true
          }
        })),
        className: "rule-action",
        children: [loading ? /*#__PURE__*/_jsx(CircularProgress, {
          size: 16
        }) : /*#__PURE__*/_jsx(AddIcon, {
          style: {
            fontSize: 16
          }
        }), t('common.create')]
      }, "add")]
    }), modalState.webhookDetail.open && /*#__PURE__*/_jsx(WebhookDetailModal, {
      open: true,
      onClose: () => setModalState(prev => ({
        ...prev,
        webhookDetail: {
          open: false,
          id: null
        }
      })),
      id: modalState.webhookDetail.id
    }), modalState.createEdit.open && /*#__PURE__*/_jsx(WebhookCreateOrEdit, {
      onSubmit: refresh,
      ...modalState.createEdit,
      onClose: () => setModalState(prev => ({
        ...prev,
        createEdit: {
          id: null,
          url: '',
          description: '',
          enabledEvents: [],
          open: false
        }
      }))
    }), modalState.deleteConfirm && /*#__PURE__*/_jsx(Confirm, {
      title: modalState.deleteConfirm.title,
      description: modalState.deleteConfirm.description,
      confirm: modalState.deleteConfirm.confirm,
      cancel: modalState.deleteConfirm.cancel,
      params: modalState.deleteConfirm.params,
      onConfirm: modalState.deleteConfirm.onConfirm,
      onCancel: modalState.deleteConfirm.onCancel
    })]
  });
}