import "./Flex.css";

function mapJustifyAlign(value) {
  if (value == null || value === "normal" || value === "stretch") return value;
  if (value === "start") return "flex-start";
  if (value === "end") return "flex-end";
  return value;
}

function gapToStyle(gap) {
  if (gap == null) return undefined;
  if (typeof gap === "number") return `${gap}px`;
  if (Array.isArray(gap)) {
    const [row, col] = gap;
    const a = typeof row === "number" ? `${row}px` : row;
    const b = col != null ? (typeof col === "number" ? `${col}px` : col) : a;
    return `${a} ${b}`;
  }
  return gap;
}

/**
 * Flex container similar to Ant Design `Flex`: vertical, justify, align, gap, wrap.
 *
 * @param {object} props
 * @param {boolean} [props.vertical]
 * @param {boolean | 'wrap' | 'nowrap' | 'wrap-reverse'} [props.wrap]
 * @param {import('react').CSSProperties['justifyContent'] | 'start' | 'end'} [props.justify]
 * @param {import('react').CSSProperties['alignItems'] | 'start' | 'end'} [props.align]
 * @param {number | string | [number | string, number | string]} [props.gap]
 * @param {import('react').CSSProperties['flex']} [props.flex]
 * @param {keyof JSX.IntrinsicElements} [props.component]
 */
export function Flex({
  vertical = false,
  wrap = "nowrap",
  justify = "normal",
  align = "normal",
  gap,
  flex: flexProp,
  component: Component = "div",
  className = "",
  style,
  children,
  ...rest
}) {
  const flexWrap =
    wrap === true ? "wrap" : wrap === false ? "nowrap" : wrap;

  const merged = {
    flexDirection: vertical ? "column" : "row",
    flexWrap,
    justifyContent:
      justify === "normal" ? undefined : mapJustifyAlign(justify),
    alignItems: align === "normal" ? undefined : mapJustifyAlign(align),
    gap: gapToStyle(gap),
    flex: flexProp,
    ...style,
  };

  return (
    <Component
      className={["ta-flex", className].filter(Boolean).join(" ")}
      style={merged}
      {...rest}
    >
      {children}
    </Component>
  );
}