import React, {
  useCallback,
  useEffect,
  useState,
  forwardRef,
  useImperativeHandle,
} from 'react';
import { CnNavBar as UICnNavBar, CnBox } from '@cainiaofe/cn-ui-m';
import {
  executeEventWithoutJS,
  isDesignMode,
  makeButtons,
} from '@/common/util/util';
import { ButtonPosition } from '@/type/button-position';

const CnNavBar = forwardRef((props, ref) => {
  if (!UICnNavBar) {
    return null;
  }
  const { title, events, _context, componentStyle, right } = props;
  const urlParams = _context?.state?.urlParams;
  const rightDom = (
    <CnBox spacing={8} direction='row'>
      {makeButtons({
        buttons: right?.map?.((item) => {
          return {
            ...item,
            position: ButtonPosition.navBarRightButton,
            text: true,
            type: 'primary',
          };
        }),
        _context,
        state: _context?.state,
        recordDataSource: {},
        jsParamList: [_context?.state],
      })}
    </CnBox>
  );

  const onBack = useCallback(() => {
    executeEventWithoutJS({
      eventType: 'onBack',
      events,
      _context,
      position: ButtonPosition.navBarEvent,
      urlParamsDataSource: urlParams,
      recordDataSource: {},
      jsParamList: [_context?.state],
    });
  }, []);

  return (
    <UICnNavBar
      onBack={onBack}
      title={title}
      backArrow={false}
      right={rightDom}
      {...componentStyle}
    />
  );
});
CnNavBar.displayName = 'CnNavBar';
export default CnNavBar;