import { useMemo } from 'react';
import styled from '@emotion/styled';
import PropTypes from 'prop-types';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import Dialog from '@arcblock/ux/lib/Dialog';
import { Typography, Stack } from '@mui/material';
import { getDisplayName } from '@blocklet/meta/lib/util';
import { isInstalling } from '../../util';
import Preference from '../preferences/preference';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default function BlockletPreferences({
  open = false,
  onClose = null,
  blocklet,
  ancestors = []
}) {
  const {
    t
  } = useLocaleContext();
  const key = [...(ancestors || []).map(x => x?.meta?.did || ''), blocklet?.meta?.did || ''].filter(Boolean).join('/');
  const name = t('preferencesFor', {
    name: getDisplayName(blocklet, true)
  });
  const tabBodyStyle = useMemo(() => {
    return {
      position: 'relative',
      minHeight: '50vh',
      height: '100%',
      overflow: 'hidden',
      border: 0
    };
  }, []);
  if (isInstalling(blocklet.status)) {
    return null;
  }
  if (blocklet.status === 'unknown' && isInstalling(blocklet.status)) {
    return null;
  }
  const handleClose = () => {
    onClose?.();
  };
  return /*#__PURE__*/_jsx(StyledDialog, {
    open: open,
    fullWidth: true,
    maxWidth: "md",
    title: name,
    onClose: handleClose,
    PaperProps: {
      style: {
        minHeight: '500px'
      }
    },
    children: /*#__PURE__*/_jsxs(Stack, {
      sx: {
        gap: 1
      },
      children: [/*#__PURE__*/_jsx(Typography, {
        sx: {
          fontSize: 12,
          color: 'text.secondary',
          mb: 0.5
        },
        children: t('description.preferences', {
          name: getDisplayName(blocklet, true)
        })
      }), /*#__PURE__*/_jsx(Preference, {
        id: key,
        styles: tabBodyStyle
      })]
    })
  });
}
BlockletPreferences.propTypes = {
  blocklet: PropTypes.object.isRequired,
  ancestors: PropTypes.array,
  open: PropTypes.bool,
  onClose: PropTypes.func
};
const StyledDialog = styled(Dialog)`
  .MuiDialogContent-root {
    padding-top: 0;
    padding-bottom: 24px;
  }

  .MuiToolbar-root {
    padding-right: 0;
  }

  .ux-dialog_closeButton {
    margin: 0;
  }
`;