import { Col, Divider, Row } from "antd";
import React from "react";
import "./layout-form-row.styles.scss";

export default function LayoutFormRow({ header, children, grow = false, noDivider = false, ...restProps }) {
  const DividerHeader = () =>
    !noDivider && (
      <Divider orientation="left" type="horizontal" style={{ marginTop: ".8rem" }}>
        {header}
      </Divider>
    );

  if (!!!children.length) {
    //We have only one element. It's going to get the whole thing.
    return (
      <div className="imex-form-row" {...restProps} style={{ marginBottom: ".8rem", ...restProps.style }}>
        <DividerHeader />
        {children}
      </div>
    );
  }
  const rowGutter = { gutter: [16, 16] };

  const colSpan = (spanOverride) => {
    if (spanOverride) return { span: spanOverride };
    return {
      xs: {
        span: !grow ? 24 : Math.max(12, 24 / children.length)
      },
      sm: {
        span: !grow ? 12 : Math.max(12, 24 / children.length)
      },
      md: {
        span: !grow ? 8 : Math.max(8, 24 / children.length)
      },
      lg: {
        span: !grow ? 6 : Math.max(6, 24 / children.length)
      },
      xl: {
        span: !grow ? 4 : Math.max(4, 24 / children.length)
      }
    };
  };
  //{header ? <Typography.Title level={4}>{header}</Typography.Title> : null}
  return (
    <div className="imex-form-row" {...restProps} style={{ marginBottom: ".8rem", ...restProps.style }}>
      <DividerHeader />
      <Row {...rowGutter}>
        {children.map(
          (c, idx) =>
            c && (
              <Col key={idx} {...colSpan(c && c.props && c.props.span)}>
                {c}
              </Col>
            )
        )}
      </Row>
    </div>
  );
}
