import { createContext, useContext, useMemo, useState } from 'react';
import PropTypes from 'prop-types';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import { Box } from '@mui/material';
import LabelIcon from '@mui/icons-material/LocalOfferOutlined';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const LabelsContext = /*#__PURE__*/createContext(null);
export function MembersLabelsProvider({
  children
}) {
  const {
    t
  } = useLocaleContext();
  const [showManageLabels, setShowManageLabels] = useState(false);
  const labelManageActions = useMemo(() => {
    return /*#__PURE__*/_jsxs(Box, {
      onClick: () => setShowManageLabels(true),
      sx: {
        display: 'flex',
        alignItems: 'center',
        gap: 1,
        width: '100%',
        height: 36,
        px: 2,
        borderTop: '1px solid',
        borderColor: 'divider',
        fontSize: 14,
        color: 'grey.600',
        cursor: 'pointer',
        textDecoration: 'none'
      },
      children: [/*#__PURE__*/_jsx(LabelIcon, {
        style: {
          fontSize: 14
        }
      }), t('label.manage')]
    });
  }, [t]);
  const value = useMemo(() => ({
    showManageLabels,
    setShowManageLabels,
    labelManageActions
  }), [showManageLabels, setShowManageLabels, labelManageActions]);
  return /*#__PURE__*/_jsx(LabelsContext.Provider, {
    value: value,
    children: children
  });
}
MembersLabelsProvider.propTypes = {
  children: PropTypes.node.isRequired
};
export function useMembersLabels() {
  return useContext(LabelsContext);
}