import { styled, Typography, Button, ButtonGroup, CircularProgress, Box, Tooltip, tooltipClasses } from '@mui/material';
import LaunchIcon from '@mui/icons-material/Launch';
import LinkOutlinedIcon from '@mui/icons-material/LinkOutlined';
import DoneIcon from '@mui/icons-material/Done';
import PropTypes from 'prop-types';
import { useEffect, useMemo, useState } from 'react';
import { joinURL } from 'ufo';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import Toast from '@arcblock/ux/lib/Toast';
import PublishIcon from '@mui/icons-material/BackupOutlined';
import { isInServerlessMode } from '@abtnode/util/lib/serverless';
import DeleteStore from './delete';
import { useNodeContext } from '../contexts/node';
import { formatError } from '../util';
import ConnectActions from './connect-actions';
import DidAddress from '../did-address';
import usePromiseWindowOpen from '../hooks/use-promise-window-open';
import DeveloperAvatar from './developer-avatar';
import UploadedToast from '../blocklet/publish/create-release/uploaded-toast';
import getSafeUrlWithToast from '../util/get-safe-url';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const BEHAVIOR = {
  CONNECT: 'connect',
  SELECT: 'select'
};
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 StoreItem({
  teamDid,
  projectId = '',
  releaseId = '',
  store,
  warningList = [],
  onDelete = () => {},
  kind = 'store',
  published = false,
  connectedStore = null,
  releaseType = '',
  onPublish = () => {},
  onOpenConnectStore = () => {},
  onSelectConnectStore = () => {},
  behavior = BEHAVIOR.CONNECT,
  scope = '',
  version = ''
}) {
  const {
    t
  } = useLocaleContext();
  const {
    api,
    info: nodeInfo,
    inService
  } = useNodeContext();
  const [loading, setLoading] = useState(false);
  const openWindow = usePromiseWindowOpen({
    messageType: 'connect-store-message',
    onOpen: () => setLoading(true),
    onClose: () => setLoading(false)
  });
  const isPublish = kind === 'publish';
  const connected = !!connectedStore;
  const handleOpenUrl = e => {
    e.stopPropagation();
    if (isPublish) {
      // 从 配置的 store 中获得，可以信任
      window.open(getSafeUrlWithToast(joinURL(store.url, 'developer/blocklets'), {
        allowDomains: null
      }));
      return;
    }
    // 从 配置的 store 中获得，可以信任
    window.open(getSafeUrlWithToast(store.url, {
      allowDomains: null
    }));
  };
  const handleConnectToStore = () => {
    if (behavior === BEHAVIOR.SELECT) {
      onSelectConnectStore(store);
      return;
    }
    openWindow(async (newWindow, open) => {
      try {
        const res = await api.connectToStore({
          input: {
            did: teamDid,
            storeUrl: store.url,
            storeId: store.id,
            storeName: store.name,
            projectId
          }
        });
        if (!res?.url) {
          Toast.error('failed to connect to store');
          return;
        }
        open(res.url);
        await onOpenConnectStore({
          did: teamDid,
          projectId,
          storeId: store.id
        });
        setLoading(false);
      } catch (err) {
        const error = formatError(err);
        Toast.error(error);
        setLoading(false);
      }
    });
  };
  const handleDisconnectStore = async () => {
    try {
      await api.disconnectFromStore({
        input: {
          did: teamDid,
          storeId: store.id,
          projectId,
          storeScope: scope
        }
      });
      onDelete();
    } catch (err) {
      Toast.error(formatError(err));
    }
  };
  const handleUploadToStore = () => {
    setLoading(true);
    api.publishToStore({
      input: {
        did: teamDid,
        storeId: store.id,
        storeName: store.name,
        projectId,
        releaseId,
        type: releaseType
      }
    }).then(res => {
      Toast.success(/*#__PURE__*/_jsx(UploadedToast, {
        storeName: connectedStore.storeName,
        storeUrl: connectedStore.storeUrl,
        did: projectId,
        version: version,
        published: res.url === 'published'
      }), {
        duration: 10000
      });
      onPublish?.(null);
    }).catch(err => {
      Toast.error(formatError(err));
      onPublish?.(err);
    }).finally(() => {
      setLoading(false);
    });
  };
  useEffect(() => {
    if (connected) {
      setLoading(false);
    }
  }, [connected]);
  const showDeleteButton = useMemo(() => {
    if (inService && isInServerlessMode(nodeInfo)) {
      return false;
    }
    return true;
  }, [inService, nodeInfo]);
  const hasWarning = warningList.length > 0;
  const uploadButton = /*#__PURE__*/_jsxs(Button, {
    sx: {
      paddingLeft: 2,
      paddingRight: 2,
      fontSize: 15,
      width: 130,
      height: '100%'
    },
    disabled: hasWarning,
    onClick: handleUploadToStore,
    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: [!isPublish && loading && /*#__PURE__*/_jsx(CircularProgress, {
      sx: {
        marginRight: 2
      },
      size: 16
    }), /*#__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: store.name
        })
      }), /*#__PURE__*/_jsx(Typography, {
        sx: {
          fontSize: 14,
          opacity: 0.5,
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          whiteSpace: 'nowrap'
        },
        component: "span",
        variant: "inherit",
        children: `${store.url}`
      })]
    }), /*#__PURE__*/_jsxs(Box, {
      sx: {
        flex: 1,
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'flex-end',
        alignItems: 'center'
      },
      children: [connectedStore && /*#__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, {
              connectedStore: connectedStore,
              sx: {
                width: 42,
                height: 42
              }
            }), /*#__PURE__*/_jsxs(Box, {
              sx: {
                flex: 1
              },
              children: [/*#__PURE__*/_jsx(Typography, {
                component: "span",
                variant: "subtitle1",
                children: connectedStore.developerName
              }), /*#__PURE__*/_jsx(DidAddress, {
                size: 14,
                copyable: true,
                compact: true,
                responsive: false,
                did: connectedStore.developerDid
              })]
            })]
          })]
        }),
        children: /*#__PURE__*/_jsx(Box, {
          children: /*#__PURE__*/_jsx(DeveloperAvatar, {
            connectedStore: connectedStore,
            sx: {
              marginRight: 1,
              cursor: 'help'
            }
          })
        })
      }), isPublish && /*#__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: handleConnectToStore,
          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,
          connectedStore: connectedStore,
          store: store,
          onDelete: onDelete,
          teamDid: teamDid,
          onDisconnect: handleDisconnectStore
        })]
      }), !isPublish && /*#__PURE__*/_jsxs(ButtonGroup, {
        disabled: loading,
        variant: "outlined",
        sx: {
          height: 36
        },
        size: "small",
        children: [/*#__PURE__*/_jsx(Button, {
          "data-cy": "store-open-url",
          onClick: handleOpenUrl,
          children: /*#__PURE__*/_jsx(LaunchIcon, {
            sx: {
              zoom: 0.9
            }
          })
        }), !store.protected && showDeleteButton && /*#__PURE__*/_jsx(DeleteStore, {
          store: store,
          onDelete: onDelete,
          teamDid: teamDid,
          scope: ""
        })]
      })]
    })]
  });
}
StoreItem.propTypes = {
  kind: PropTypes.string,
  teamDid: PropTypes.string.isRequired,
  published: PropTypes.bool,
  connectedStore: PropTypes.shape({
    storeName: PropTypes.string,
    storeId: PropTypes.string,
    storeUrl: PropTypes.string,
    developerDid: PropTypes.string,
    developerName: PropTypes.string
  }),
  warningList: PropTypes.array,
  projectId: PropTypes.string,
  releaseId: PropTypes.string,
  releaseType: PropTypes.string,
  store: PropTypes.shape({
    id: PropTypes.string.isRequired,
    name: PropTypes.string.isRequired,
    url: PropTypes.string.isRequired,
    protected: PropTypes.bool,
    connected: PropTypes.bool
  }).isRequired,
  scope: PropTypes.string,
  onDelete: PropTypes.func,
  onPublish: PropTypes.func,
  onOpenConnectStore: PropTypes.func,
  behavior: PropTypes.string,
  onSelectConnectStore: PropTypes.func,
  version: PropTypes.string
};