import { Box } from '@mui/material';
import { useLayoutEffect, useMemo, useRef, useState } from 'react';
import { useSize } from 'ahooks';
import PropTypes from 'prop-types';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import LabelPicker from './label';
import LabelChip from '../chip';
import Select from './select';
import { useLabels } from '../context/context';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function LabelsInput({
  value = [],
  onChange = () => {},
  LabelPickerProps = {},
  disabled = false,
  sx = [],
  compact = true,
  multiple = true,
  ...rest
}) {
  const {
    getLabelsByIds,
    loading
  } = useLabels();
  const valueOptions = useMemo(() => getLabelsByIds(value), [getLabelsByIds, value]);
  const hasValue = value?.length > 0;
  const mergedSx = [{}, ...(Array.isArray(sx) ? sx : [sx])];
  const {
    t
  } = useLocaleContext();
  const placeholder = !value?.length ? rest.placeholder || t('label.selectLabels') : '';
  const labelsWrapperRef = useRef(null);
  const size = useSize(labelsWrapperRef);
  const [overflowIndex, setOverflowIndex] = useState(99999);
  useLayoutEffect(() => {
    if (compact) {
      if (labelsWrapperRef.current) {
        const {
          right
        } = labelsWrapperRef.current.getBoundingClientRect();
        const labelElements = labelsWrapperRef.current.querySelectorAll('.MuiChip-root');
        if (labelElements) {
          const overflow = Array.from(labelElements).some((x, i) => {
            const rect = x.getBoundingClientRect();
            if (rect.right > right) {
              setOverflowIndex(i);
              return true;
            }
            return false;
          });
          if (!overflow) {
            setOverflowIndex(99999);
          }
        }
      }
    } else {
      setOverflowIndex(99999);
    }
  }, [valueOptions, size, compact]);
  if (loading) return null;
  return /*#__PURE__*/_jsx(LabelPicker, {
    disabled: disabled,
    value: value,
    onChange: onChange,
    multiple: multiple,
    trigger: /*#__PURE__*/_jsx(Select, {
      multiple: multiple,
      disabled: disabled,
      open: false,
      value: hasValue ? value : ['none'],
      size: "small",
      renderValue: () => {
        if (!hasValue) {
          return /*#__PURE__*/_jsx(Box, {
            sx: {
              color: 'text.secondary',
              fontSize: 14
            },
            children: placeholder
          });
        }
        return /*#__PURE__*/_jsx(Box, {
          sx: {
            ...(compact && {
              height: 20
            }),
            mt: -0.1,
            pr: 3
          },
          children: /*#__PURE__*/_jsx(Box, {
            ref: labelsWrapperRef,
            sx: {
              display: 'flex',
              gap: 0.5,
              ...(!compact && {
                flexWrap: 'wrap'
              })
            },
            children: valueOptions.map((x, index) => {
              const visible = index < overflowIndex;
              return /*#__PURE__*/_jsxs(Box, {
                sx: {
                  position: 'relative'
                },
                children: [index === overflowIndex && /*#__PURE__*/_jsx(Box, {
                  sx: {
                    display: 'inline-flex',
                    ...(compact && {
                      height: 20,
                      lineHeight: '20px'
                    }),
                    color: 'text.secondary',
                    fontWeight: 'bold',
                    fontSize: 14
                  },
                  children: `+${value.length - overflowIndex}`
                }), /*#__PURE__*/_jsx(LabelChip, {
                  label: x.data,
                  sx: {
                    visibility: visible ? 'visible' : 'hidden',
                    pointerEvents: visible ? 'auto' : 'none'
                  },
                  onDelete: () => onChange(value.filter(item => item !== x.data.id)),
                  disabled: disabled
                })]
              }, x.data.id);
            })
          })
        });
      },
      sx: mergedSx
    }),
    ...LabelPickerProps
  });
}
LabelsInput.propTypes = {
  value: PropTypes.array,
  onChange: PropTypes.func,
  LabelPickerProps: PropTypes.object,
  disabled: PropTypes.bool,
  sx: PropTypes.array,
  compact: PropTypes.bool,
  multiple: PropTypes.bool
};
export default LabelsInput;