import * as stylex from '@stylexjs/stylex';

import type { LayoutProps } from './types';

import {
  alignMap,
  gapMap,
  justifyMap,
  layoutStyles,
  paddingBottomMap,
  paddingLeftMap,
  paddingMap,
  paddingRightMap,
  paddingTopMap,
  paddingXMap,
  paddingYMap,
} from './styles';

/**
 * A simple layout component that can be used to create consistent spacing and alignment across the app.
 * It uses flexbox under the hood and accepts props for gap, alignment, justification, padding, and wrapping.
 * The spacing values are based on the design tokens defined in the global styles.
 *
 * NB! This component is layout only and should not be used for styling individual elements.
 */
export const Layout = ({
  gap,
  padding,
  paddingX,
  paddingY,
  paddingTop,
  paddingRight,
  paddingBottom,
  paddingLeft,
  align,
  justify,
  children,
  column,
  wrap,
  shrink,
  maxWidth,
  maxHeight,
  minWidth,
  minHeight,
  width,
  height,
  overflow,
  overflowX,
  overflowY,
  span,
  style,
  testId,
}: LayoutProps) => {
  return (
    <div
      data-testid={testId}
      {...stylex.props(
        layoutStyles.base,
        column && layoutStyles.column,
        shrink && layoutStyles.shrink,
        wrap && layoutStyles.wrap,
        justify && justifyMap[justify],
        align && alignMap[align],
        gap && gapMap[gap],
        padding && paddingMap[padding],
        paddingX && paddingXMap[paddingX],
        paddingY && paddingYMap[paddingY],
        paddingTop && paddingTopMap[paddingTop],
        paddingRight && paddingRightMap[paddingRight],
        paddingBottom && paddingBottomMap[paddingBottom],
        paddingLeft && paddingLeftMap[paddingLeft],
        style
      )}
      style={{
        maxWidth,
        minWidth,
        minHeight,
        width,
        height,
        maxHeight,
        gridColumn: span ? `span ${span}` : undefined,
        overflow,
        overflowX,
        overflowY,
      }}
    >
      {children}
    </div>
  );
};