import styled from '@emotion/styled';
import PropTypes from 'prop-types';
import React, { useContext } from 'react';
import Box from '@mui/material/Box';
import Divider from '@mui/material/Divider';
import Typography from '@mui/material/Typography';
import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
import { useNodeContext } from '../contexts/node';
import { isInstalling, BlockletAdminRoles } from '../util';
import { withPermission } from '../permission';
import Branding from './branding';
import DangerZone from './danger-zone';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function BlockletEnvironment({
  blocklet,
  onUpdate = () => {},
  hasPermission = false,
  ...rest
}) {
  const {
    t
  } = useContext(LocaleContext);
  if (isInstalling(blocklet.status)) {
    return null;
  }
  return /*#__PURE__*/_jsxs(ConfigurationContainer, {
    ...rest,
    children: [/*#__PURE__*/_jsx(Branding, {
      blocklet: blocklet,
      onUpdate: onUpdate,
      hasPermission: hasPermission
    }), /*#__PURE__*/_jsx(Box, {
      sx: {
        mt: 6
      },
      children: /*#__PURE__*/_jsx(Typography, {
        variant: "h6",
        sx: {
          fontWeight: 600
        },
        children: t('blocklet.config.dangerZone')
      })
    }), /*#__PURE__*/_jsx(Box, {
      className: "config-form",
      component: Divider,
      sx: {
        my: 3
      }
    }), /*#__PURE__*/_jsx(Box, {
      sx: {
        maxWidth: 1536
      },
      children: /*#__PURE__*/_jsx(DangerZone, {
        blocklet: blocklet,
        onUpdate: onUpdate,
        hasPermission: hasPermission
      })
    })]
  });
}
const BlockletEnvironmentInDaemon = withPermission(BlockletEnvironment, 'mutate_blocklets');
const BlockletEnvironmentInService = withPermission(BlockletEnvironment, '', BlockletAdminRoles);
export default function BlockletEnvironmentWithPermission(props) {
  const {
    inService
  } = useNodeContext();
  if (inService) {
    return /*#__PURE__*/_jsx(BlockletEnvironmentInService, {
      ...props
    });
  }
  return /*#__PURE__*/_jsx(BlockletEnvironmentInDaemon, {
    ...props
  });
}
BlockletEnvironment.propTypes = {
  blocklet: PropTypes.object.isRequired,
  onUpdate: PropTypes.func,
  hasPermission: PropTypes.bool
};
const ConfigurationContainer = styled(Box)`
  .config-form {
    flex-grow: 1;
    overflow-y: auto;
    ${props => props.theme.breakpoints.down('md')} {
      width: 100%;
      flex-shrink: 0;
      padding: 0 24px;
      transform: translate(0, 0);
    }
  }

  .config-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 16px 0;
  }

  .config-label {
    font-weight: bold;
  }

  .config-desc {
    font-weight: normal;
    font-size: 12px;
    color: #666;
  }

  .form-item {
    margin-top: 0;
  }
`;