import React, { useState, useRef, useEffect } from 'react';
import { Button } from 'antd';
import Title from '../Title';
import IconFont from '../../themeComponents/IconFont';
import './index.less';

// showMore 显示更多 收起时只展示3行
const FormCollapsedLayout = ({ className = '', icon, title, children, titleExt, visibleCollapsed }) => {
  const domRef = useRef(null);
  const [isCollapsed, setIsCollapsed] = useState(visibleCollapsed);

  return (
    <div className={`lm-form-collapsed-layout ${className}`} ref={domRef}>
      {title && (
        <Title icon={icon} title={title}>
          {titleExt}
        </Title>
      )}
      {React.cloneElement(children, { isCollapsed })}
      {visibleCollapsed && (
        <div className="toggle-btn-box" onClick={() => setIsCollapsed(!isCollapsed)}>
          <a type="link" className="toggle-btn">
            <IconFont type={'icon-M_Bar_Plus'} />
            {isCollapsed ? '展开' : '收起'}
          </a>
        </div>
      )}
    </div>
  );
};

export default FormCollapsedLayout;
