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

export default function LayoutFormRow({
  header,
  children,
  grow = false,
  ...restProps
}) {
  if (!!!children.length) {
    //We have only one element. It's going to get the whole thing.
    return (
      <div className="imex-form-row">
        {header ? (
          <Typography.Title level={4}>{header}</Typography.Title>
        ) : null}
        {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),
      },
    };
  };

  return (
    <div className="imex-form-row" {...restProps}>
      {header ? <Typography.Title level={4}>{header}</Typography.Title> : null}
      <Row {...rowGutter}>
        {children.map(
          (c, idx) =>
            c && (
              <Col key={idx} {...colSpan(c && c.props && c.props.span)}>
                {c}
              </Col>
            )
        )}
      </Row>
    </div>
  );
}