// Libs
// -----------------------------------------------------------------------------
import React, { FC, ReactNode } from 'react';

// App
// -----------------------------------------------------------------------------
import styles from './FormFieldsBlock.module.scss';

// Props
// -----------------------------------------------------------------------------
type FormFieldsBlockProps = {
  title: ReactNode;
  headerExtra?: ReactNode;
};

/**
 * Компонент группы полей формы.
 */
export const FormFieldsBlock: FC<FormFieldsBlockProps> & {
  Divider: FC;
  SubBlock: FC<SubBlockProps>;
} = ({ title, headerExtra, children }) => {
  return (
    <div>
      <div className={styles['header']}>
        <div className={styles['header-title']}>{title}</div>
        {headerExtra && (
          <div className={styles['header-extra']}>{headerExtra}</div>
        )}
      </div>
      <div className={styles['content']}>{children}</div>
    </div>
  );
};

/**
 * Компонент разделителя подгрупп полей формы.
 */
const Divider: FC = () => <div className={styles['divider']}></div>;

FormFieldsBlock.Divider = Divider;

type SubBlockProps = {
  title: ReactNode;
  headerExtra?: ReactNode;
};

/**
 * Компонент подгруппы полей формы.
 */
const SubBlock: FC<SubBlockProps> = ({ title, headerExtra, children }) => {
  return (
    <div className={styles['sub-block']}>
      <div className={styles['sub-block-header']}>
        <div className={styles['sub-block-header-title']}>{title}</div>
        {headerExtra && (
          <div className={styles['sub-block-header-extra']}>{headerExtra}</div>
        )}
      </div>
      <div className={styles['sub-block-content']}>{children}</div>
    </div>
  );
};

FormFieldsBlock.SubBlock = SubBlock;
