import {FC, useMemo} from "react";

import {Flex, FlexProps} from "./Flex";
import {useGridContext} from "./GridContext";
import {ColumnSizesType} from "./types";

export interface ColumnProps extends FlexProps {
  size?: ColumnSizesType;
  offset?: ColumnSizesType;
  column?: boolean;
}

export const Column: FC<ColumnProps> = props => {
  const {size = 0, offset = 0, column = true, gap = 2, classNames = [], ...rest} = props;
  const {isCssGrid = false} = useGridContext();

  const getClassNames = useMemo(() => {
    const newClassNames: string[] = [];

    if (size) {
      let colClassName = `col-${size}`;

      if (isCssGrid) colClassName = `g-${colClassName}`;

      newClassNames.push(colClassName);
    }

    if (offset) {
      let colClassName = `offset-${offset}`;

      if (isCssGrid) colClassName = `g-start-${offset}`;

      newClassNames.push(colClassName);
    }

    if (classNames.length) newClassNames.push(...classNames);

    return newClassNames;
  }, [size, offset, isCssGrid, classNames]);

  return <Flex classNames={getClassNames} column={column} gap={gap} {...rest} />;
};
