import { joinClassNames } from '@vizality/util/dom';
import { Divider, Icon } from '@vizality/components';
import { getModule } from '@vizality/webpack';
import React, { memo } from 'react';

/**
 * Dashboard section header.
 * @component
 * @param {string|React.Component|function(): React.ReactElement} [header] Section header
 * @param {string|React.Component|function(): React.ReactElement} [description] Section description
 * @returns {React.MemoExoticComponent<function(): React.ReactElement>}
 */
export const Header = memo(({ icon, header, description, separator, collapsible }) => {
  const { marginBottom40 } = getModule('marginBottom40');
  const { content } = getModule('wrappedLayout');
  const { h1 } = getModule('h1', 'h2', 'h3');
  const { size24 } = getModule('size24');
  return (
    <div className={joinClassNames('vz-dashboard-section-header-wrapper', { [marginBottom40]: !collapsible })}>
      <div className='vz-dashboard-content-header-inner-wrapper'>
        {icon && (
          <Icon
            className='vz-dashboard-section-header-icon-wrapper'
            iconClassName='vz-dashboard-section-header-icon'
            name={icon}
            size='100%'
          />
        )}
        <h2 className={joinClassNames('vz-dashboard-section-header', size24, content)}>
          {header}
        </h2>
      </div>
      {description && (
        <h4 className={joinClassNames('vz-dashboard-section-header-description', h1)}>
          {description}
        </h4>
      )}
      {separator && (
        <Divider />
      )}
    </div>
  );
});

/**
 * Dashboard content section.
 * @component
 * @param {string|React.Component|function(): React.ReactElement} [header] Section header
 * @param {string|React.Component|function(): React.ReactElement} [description] Section description
 * @param {string} [className] Section class
 * @param {...any} [children] Section children
 * @returns {React.MemoExoticComponent<function(): React.ReactElement>}
 */
export default memo(({ header, description, icon, separator = true, collapsible = false, id, className, children }) => {
  return (
    <div className={joinClassNames('vz-dashboard-section', className)} vz-collapsible={collapsible && ''} id={id}>
      {header && (
        <Header header={header} description={description} icon={icon} separator={separator} collapsible={collapsible} />
      )}
      <div className='vz-dashboard-section-contents'>
        {children}
      </div>
    </div>
  );
});
