import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import { Close } from '@mui/icons-material';
import { IconButton, styled, Chip, Alert, Box, CircularProgress, Stack, Tooltip, Typography, Drawer } from '@mui/material';
import { useRequest } from 'ahooks';
import PropTypes from 'prop-types';
import React from 'react';
import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
import { useNodeContext } from '../../contexts/node';
import InfoMetric from './components/info-metric';
import SectionHeader from './components/header';
import WebhookAttempts from './components/attempts';
import { getWebhookStatusColor, formatTime } from './util';
import { useTeamContext } from '../../contexts/team';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function WebhookDetail({
  id,
  onClose
}) {
  const {
    t
  } = useLocaleContext();
  const {
    api
  } = useNodeContext();
  const {
    teamDid
  } = useTeamContext();
  const {
    loading,
    error,
    data: result
  } = useRequest(() => api.getWebhookEndpoint({
    input: {
      teamDid,
      id
    }
  }));
  const data = result?.data;
  if (error) {
    return /*#__PURE__*/_jsx(Alert, {
      severity: "error",
      children: error.message
    });
  }
  if (loading || !data) {
    return /*#__PURE__*/_jsx(Box, {
      sx: {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        height: 1,
        width: 1
      },
      children: /*#__PURE__*/_jsx(CircularProgress, {})
    });
  }
  return /*#__PURE__*/_jsxs(Root, {
    direction: "column",
    sx: {
      height: {
        xs: 'auto',
        md: 1
      }
    },
    children: [/*#__PURE__*/_jsxs(Box, {
      children: [/*#__PURE__*/_jsxs(Stack, {
        direction: "row",
        sx: {
          justifyContent: 'space-between',
          alignItems: 'center'
        },
        children: [/*#__PURE__*/_jsx(Stack, {
          sx: {
            flex: 1,
            width: 0
          },
          children: /*#__PURE__*/_jsxs(Box, {
            sx: {
              display: 'flex',
              alignItems: 'center',
              gap: 1
            },
            children: [/*#__PURE__*/_jsx(Typography, {
              variant: "h5",
              sx: {
                fontWeight: 600,
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis'
              },
              children: data.description
            }), /*#__PURE__*/_jsx(Tooltip, {
              title: data.url,
              children: /*#__PURE__*/_jsx(InfoOutlinedIcon, {
                sx: {
                  fontSize: '16px',
                  marginTop: '2px'
                }
              })
            })]
          })
        }), /*#__PURE__*/_jsx(Stack, {
          direction: "row",
          sx: {
            alignItems: 'center'
          },
          children: /*#__PURE__*/_jsx(IconButton, {
            edge: "end",
            color: "inherit",
            onClick: onClose,
            children: /*#__PURE__*/_jsx(Close, {})
          })
        })]
      }), /*#__PURE__*/_jsx(Box, {
        sx: {
          mt: 2
        },
        children: /*#__PURE__*/_jsxs(Stack, {
          className: "section-body",
          direction: {
            xs: 'column',
            md: 'row'
          },
          spacing: {
            xs: 1,
            md: 3
          },
          sx: {
            justifyContent: 'flex-start',
            flexWrap: 'wrap',
            pt: 2,
            mt: 2,
            borderTop: '1px solid #eee'
          },
          children: [/*#__PURE__*/_jsx(InfoMetric, {
            label: t('common.status'),
            value: /*#__PURE__*/_jsx(Chip, {
              size: "small",
              variant: "filled",
              label: data.status,
              color: getWebhookStatusColor(data.status),
              sx: {
                borderRadius: '4px',
                lineHeight: '20px',
                textTransform: 'capitalize'
              }
            }),
            divider: true
          }), /*#__PURE__*/_jsx(InfoMetric, {
            label: t('webhookEndpoint.listen'),
            value: /*#__PURE__*/_jsx(Tooltip, {
              arrow: true,
              title: /*#__PURE__*/_jsx("ul", {
                style: {
                  padding: 0,
                  margin: 0
                },
                children: data.enabledEvents.map(x => /*#__PURE__*/_jsx("li", {
                  style: {
                    fontSize: '0.7875rem'
                  },
                  children: x?.type
                }, x))
              }),
              children: /*#__PURE__*/_jsx(Chip, {
                size: "small",
                variant: "filled",
                label: t('webhookEndpoint.eventsCount', {
                  count: data.enabledEvents.length
                }),
                sx: {
                  borderRadius: '4px',
                  lineHeight: '20px',
                  textTransform: 'capitalize'
                }
              })
            }),
            divider: true
          }), /*#__PURE__*/_jsx(InfoMetric, {
            label: t('webhookEndpoint.version'),
            value: data.apiVersion,
            divider: true
          }), /*#__PURE__*/_jsx(InfoMetric, {
            label: t('common.createdAt'),
            value: formatTime(data.createdAt),
            divider: true
          }), /*#__PURE__*/_jsx(InfoMetric, {
            label: t('common.updatedAt'),
            value: formatTime(data.updatedAt),
            divider: true
          }), /*#__PURE__*/_jsx(InfoMetric, {
            label: t('common.createdBy'),
            value: /*#__PURE__*/_jsx(Tooltip, {
              arrow: true,
              title: data.createUser?.did,
              children: /*#__PURE__*/_jsx(Chip, {
                size: "small",
                variant: "filled",
                label: data.createUser?.fullName,
                sx: {
                  borderRadius: '4px',
                  lineHeight: '20px',
                  textTransform: 'capitalize'
                }
              })
            }),
            divider: true
          }), /*#__PURE__*/_jsx(InfoMetric, {
            label: t('common.updatedBy'),
            value: /*#__PURE__*/_jsx(Tooltip, {
              arrow: true,
              title: data.updateUser?.did,
              children: /*#__PURE__*/_jsx(Chip, {
                size: "small",
                variant: "filled",
                label: data.updateUser?.fullName,
                sx: {
                  borderRadius: '4px',
                  lineHeight: '20px',
                  textTransform: 'capitalize'
                }
              })
            })
          })]
        })
      })]
    }), /*#__PURE__*/_jsxs(Stack, {
      className: "section",
      sx: {
        flex: 1,
        height: 0,
        overflow: 'hidden'
      },
      children: [/*#__PURE__*/_jsx(SectionHeader, {
        title: t('webhookEndpoint.attempts'),
        mb: 0,
        mt: 4
      }), /*#__PURE__*/_jsx(Stack, {
        sx: {
          height: 0,
          flex: 1,
          overflow: 'hidden'
        },
        children: /*#__PURE__*/_jsx(WebhookAttempts, {
          webhookEndpointId: data.id
        })
      })]
    })]
  });
}
WebhookDetail.propTypes = {
  id: PropTypes.string.isRequired,
  onClose: PropTypes.func.isRequired
};
const Root = styled(Stack)``;
export default function WebhookDetailModal({
  open,
  onClose,
  id
}) {
  return /*#__PURE__*/_jsx(Drawer, {
    anchor: "right",
    open: open,
    onClose: onClose,
    slotProps: {
      paper: {
        sx: {
          width: '90vw',
          maxWidth: '1200px'
        }
      }
    },
    children: /*#__PURE__*/_jsx(Box, {
      sx: {
        height: '100vh',
        p: 3
      },
      children: /*#__PURE__*/_jsx(WebhookDetail, {
        id: id,
        onClose: onClose
      })
    })
  });
}
WebhookDetailModal.propTypes = {
  open: PropTypes.bool.isRequired,
  onClose: PropTypes.func.isRequired,
  id: PropTypes.string.isRequired
};