import { Typography, Button, ButtonGroup, CircularProgress, Box, Tooltip, tooltipClasses, styled } from '@mui/material';
import LinkOutlinedIcon from '@mui/icons-material/LinkOutlined';
import DoneIcon from '@mui/icons-material/Done';
import PropTypes from 'prop-types';
import { useEffect, useState } from 'react';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import Toast from '@arcblock/ux/lib/Toast';
import PublishIcon from '@mui/icons-material/BackupOutlined';
import { useNodeContext } from '../../../contexts/node';
import { formatError } from '../../../util';
import ConnectActions from './connect-actions';
import DeveloperAvatar from './developer-avatar';
import DidAddress from '../../../did-address';
import usePromiseWindowOpen from '../../../hooks/use-promise-window-open';
import UploadedToast from './uploaded';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const WhiteTooltip = styled(({
  className,
  ...props
}) => /*#__PURE__*/_jsx(Tooltip, {
  ...props,
  classes: {
    popper: className
  }
}))(({
  theme
}) => ({
  [`& .${tooltipClasses.tooltip}`]: {
    backgroundColor: '#fff',
    color: 'rgba(0, 0, 0, 0.87)',
    borderRadius: 8,
    padding: theme.spacing(2),
    fontSize: theme.typography.pxToRem(12),
    border: '1px solid rgba(0,0,0,0.08)',
    boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.05)'
  }
}));
export default function EndpointItem({
  teamDid,
  projectId = '',
  releaseId = '',
  endpoint,
  warningList = [],
  onDelete = () => {},
  published = false,
  onPublish = () => {},
  connectedEndpoint = null,
  onOpenConnectEndpoint = () => {}
}) {
  const {
    t
  } = useLocaleContext();
  const {
    api
  } = useNodeContext();
  const [loading, setLoading] = useState(false);
  const openWindow = usePromiseWindowOpen({
    messageType: 'connect-endpoint-message',
    onOpen: () => setLoading(true),
    onClose: () => setLoading(false)
  });
  const connected = !!connectedEndpoint;
  const handleConnectToEndpoint = () => {
    openWindow(async (_, open) => {
      try {
        const res = await api.connectToEndpoint({
          input: {
            did: teamDid,
            endpointId: endpoint.id,
            projectId
          }
        });
        if (!res?.url) {
          Toast.error('failed to connect to endpoint');
          return;
        }
        open(res.url);
        await onOpenConnectEndpoint({
          did: teamDid,
          projectId,
          endpointId: endpoint.id
        });
        setLoading(false);
      } catch (err) {
        const error = formatError(err);
        Toast.error(error);
        setLoading(false);
      }
    });
  };
  const handleDisconnectEndpoint = async () => {
    try {
      await api.disconnectFromEndpoint({
        input: {
          did: teamDid,
          endpointId: endpoint.id,
          projectId
        }
      });
      onDelete();
    } catch (err) {
      Toast.error(formatError(err));
    }
  };
  const handleUploadToEndpoint = () => {
    setLoading(true);
    api.publishToEndpoint({
      input: {
        did: teamDid,
        endpointId: endpoint.id,
        projectId,
        releaseId
      }
    }).then(() => {
      Toast.success(/*#__PURE__*/_jsx(UploadedToast, {
        endpoint: endpoint,
        published: true
      }), {
        duration: 10000
      });
      onPublish?.(null);
    }).catch(err => {
      Toast.error(formatError(err));
      onPublish?.(err);
    }).finally(() => {
      setLoading(false);
    });
  };
  useEffect(() => {
    if (connected) {
      setLoading(false);
    }
  }, [connected]);
  const hasWarning = warningList.length > 0;
  const uploadButton = /*#__PURE__*/_jsxs(Button, {
    sx: {
      paddingLeft: 2,
      paddingRight: 2,
      fontSize: 15,
      width: 130,
      height: '100%'
    },
    disabled: hasWarning,
    onClick: handleUploadToEndpoint,
    children: [loading ? /*#__PURE__*/_jsx(CircularProgress, {
      sx: {
        marginRight: 1
      },
      size: 16
    }) : /*#__PURE__*/_jsx(PublishIcon, {
      sx: {
        marginRight: 1,
        fontSize: 20
      }
    }), t('common.upload')]
  });
  return /*#__PURE__*/_jsxs(Box, {
    sx: {
      display: 'flex',
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      overflow: 'hidden',
      width: '100%'
    },
    children: [/*#__PURE__*/_jsxs(Box, {
      sx: {
        flexShrink: 1,
        display: 'flex',
        flexDirection: 'column',
        overflow: 'hidden',
        flex: 1
      },
      children: [/*#__PURE__*/_jsx(Box, {
        sx: {
          display: 'flex',
          flexDirection: 'row'
        },
        children: /*#__PURE__*/_jsx(Typography, {
          component: "span",
          sx: {
            fontSize: 16,
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            whiteSpace: 'nowrap'
          },
          variant: "subtitle1",
          children: endpoint.appName
        })
      }), /*#__PURE__*/_jsx(Typography, {
        sx: {
          fontSize: 14,
          opacity: 0.5,
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          whiteSpace: 'nowrap'
        },
        component: "span",
        variant: "inherit",
        children: `${endpoint.url}`
      })]
    }), /*#__PURE__*/_jsxs(Box, {
      sx: {
        flex: 1,
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'flex-end',
        alignItems: 'center'
      },
      children: [connectedEndpoint && /*#__PURE__*/_jsx(WhiteTooltip, {
        placement: "top",
        title: /*#__PURE__*/_jsxs(Box, {
          children: [/*#__PURE__*/_jsx(Typography, {
            component: "span",
            variant: "caption",
            sx: {
              opacity: 0.7
            },
            children: t('blocklet.publish.developerInfo')
          }), /*#__PURE__*/_jsxs(Box, {
            sx: {
              display: 'flex',
              flexDirection: 'row',
              alignItems: 'center',
              gap: 1,
              mt: 1
            },
            children: [/*#__PURE__*/_jsx(DeveloperAvatar, {
              developerUrl: endpoint.url,
              developerDid: connectedEndpoint.developerDid,
              sx: {
                width: 42,
                height: 42
              }
            }), /*#__PURE__*/_jsxs(Box, {
              sx: {
                flex: 1
              },
              children: [/*#__PURE__*/_jsx(Typography, {
                component: "span",
                variant: "subtitle1",
                children: connectedEndpoint.developerName
              }), /*#__PURE__*/_jsx(DidAddress, {
                size: 14,
                copyable: true,
                compact: true,
                responsive: false,
                did: connectedEndpoint.developerDid
              })]
            })]
          })]
        }),
        children: /*#__PURE__*/_jsx(Box, {
          children: /*#__PURE__*/_jsx(DeveloperAvatar, {
            developerUrl: endpoint.url,
            developerDid: connectedEndpoint.developerDid,
            sx: {
              marginRight: 1,
              cursor: 'help'
            }
          })
        })
      }), /*#__PURE__*/_jsxs(ButtonGroup, {
        disabled: loading,
        variant: "outlined",
        sx: {
          height: 38
        },
        size: "small",
        children: [!connected && /*#__PURE__*/_jsxs(Button, {
          sx: {
            paddingLeft: 2,
            paddingRight: 2,
            fontSize: 15,
            width: 130
          },
          onClick: handleConnectToEndpoint,
          children: [loading ? /*#__PURE__*/_jsx(CircularProgress, {
            sx: {
              marginRight: 1
            },
            size: 16
          }) : /*#__PURE__*/_jsx(LinkOutlinedIcon, {
            sx: {
              marginRight: 1
            }
          }), t('common.connect')]
        }), connected && published && /*#__PURE__*/_jsxs(Button, {
          disabled: true,
          sx: {
            paddingLeft: 2,
            paddingRight: 2,
            fontSize: 15,
            width: 130
          },
          children: [loading ? /*#__PURE__*/_jsx(CircularProgress, {
            sx: {
              marginRight: 1
            },
            size: 16
          }) : /*#__PURE__*/_jsx(DoneIcon, {
            sx: {
              marginRight: 1
            }
          }), t('common.uploaded')]
        }), connected && !published && (hasWarning ? /*#__PURE__*/_jsx(WhiteTooltip, {
          title: /*#__PURE__*/_jsxs(Box, {
            children: [/*#__PURE__*/_jsx(Box, {
              sx: {
                color: 'error.main',
                mb: 0.5
              },
              children: t('blocklet.publish.storeRule.warning')
            }), warningList.map((x, index) => /*#__PURE__*/_jsxs(Box, {
              sx: {
                color: 'error.main'
              },
              children: [index + 1, ". ", x]
            }, x))]
          }),
          children: /*#__PURE__*/_jsx("div", {
            children: uploadButton
          })
        }) : uploadButton), /*#__PURE__*/_jsx(ConnectActions, {
          projectId: projectId,
          endpoint: endpoint,
          teamDid: teamDid,
          connectedEndpoint: connectedEndpoint,
          onDisconnect: handleDisconnectEndpoint,
          onDelete: onDelete
        })]
      })]
    })]
  });
}
EndpointItem.propTypes = {
  teamDid: PropTypes.string.isRequired,
  published: PropTypes.bool,
  connectedEndpoint: PropTypes.shape({
    endpointId: PropTypes.string,
    accessKeyId: PropTypes.string,
    accessKeySecret: PropTypes.string,
    createdBy: PropTypes.string,
    developerDid: PropTypes.string,
    developerName: PropTypes.string,
    developerEmail: PropTypes.string
  }),
  warningList: PropTypes.array,
  projectId: PropTypes.string,
  releaseId: PropTypes.string,
  endpoint: PropTypes.shape({
    id: PropTypes.string.isRequired,
    appName: PropTypes.string,
    url: PropTypes.string.isRequired,
    endpoint: PropTypes.string.isRequired,
    protected: PropTypes.bool,
    connected: PropTypes.bool
  }).isRequired,
  onDelete: PropTypes.func,
  onOpenConnectEndpoint: PropTypes.func,
  onPublish: PropTypes.func
};