import type { DrawerProps } from 'antd';
import { Drawer } from 'antd';
import type { CSSProperties, RefObject } from 'react';
import { createContext, memo, useRef } from 'react';
import { useIntl } from 'umi';
import AuditListView from './View';

const styles: Record<'drawerBody' | 'wrapper', CSSProperties> = {
  drawerBody: {
    overflow: 'hidden',
    padding: 0,
  },
  wrapper: {
    width: '100%',
    height: '100%',
    padding: 24,
    overflow: 'auto',
  },
};

export const AuditContainerContext = createContext<{
  wrapperRef: RefObject<HTMLElement | undefined> | undefined;
}>({
  wrapperRef: undefined,
});

export interface UacAuditListProps {
  /**
   * @description 审批流ID
   */
  chainId: string;
  /**
   * @description 触发的trigger
   */
  triggerRender?: JSX.Element;
  open?: boolean;
  setOpen?: (open: boolean) => void;
  openObj?: any;
  setOpenObj?: (o: any) => void;
  drawerProps?: DrawerProps;
  readOnly?: boolean;
}

const AuditList = (props: UacAuditListProps) => {
  const { triggerRender, open, setOpen, openObj, setOpenObj, chainId, drawerProps, readOnly } =
    props;
  const { formatMessage } = useIntl();
  const wrapperRef = useRef<HTMLDivElement>(null);

  return (
    <>
      <Drawer
        open={open}
        onClose={() => {
          setOpen?.(false);
          setOpenObj?.({ ...openObj, isopen: false });
        }}
        width={'100%'}
        title={formatMessage({ id: 'base.process.approval' })}
        destroyOnClose
        {...drawerProps}
        bodyStyle={styles.drawerBody}
      >
        <div style={styles.wrapper} ref={wrapperRef}>
          <AuditContainerContext.Provider value={{ wrapperRef }}>
            <AuditListView chainId={chainId} readOnly={readOnly} />
          </AuditContainerContext.Provider>
        </div>
      </Drawer>
      {triggerRender}
    </>
  );
};
export default memo(AuditList);