import React, { useEffect, useRef, useState } from 'react';
import cn from 'classnames';
import './index.scss';

interface FixFooterContainerProps {
  children: React.ReactNode;
  fixed?: boolean; //是否fixed底部
}

/**
 * fix底部容器
 * @param props
 * @returns
 */
const FixFooterContainer: React.FC<FixFooterContainerProps> = (props) => {
  const { children, fixed = true } = props;
  const containerEl = useRef(null);
  const [fixedBottomStyle, setFixedBottomStyle] = useState({});

  /** 计算容器的高度，并更新容器的高度, 保证fixed到底部的容器不遮挡内容区域 */
  const calculateFixedContentHeight = () => {
    const currentDom = containerEl?.current;
    if (currentDom) {
      // @ts-ignore-line
      const height = currentDom?.firstElementChild?.offsetHeight || 0;
      setFixedBottomStyle({ height });
    }
  };

  useEffect(() => {
    calculateFixedContentHeight();
  });

  return (
    <div
      className={cn({
        'oc-ffc': true,
        fixed: fixed,
      })}
      ref={containerEl}
      style={fixedBottomStyle}
    >
      <div className="oc-ffc-inset">{children}</div>
    </div>
  );
};

export default FixFooterContainer;