/* eslint-disable react/prop-types */
import React from 'react';
import classNames from 'clsx';
import { useTheme } from '@mui/material/styles';

import { ITEM_SPACE } from '@/modules/@common/Form/constants';
import { largeSize, mediumSize, smallSize, xSmallSize } from '@/mui/components/constants';

import { useFormSettings } from '@/modules/@common/Form/helpers/hooks';
import { isInRange } from '@/modules/@common/helpers/number';

import { Box } from '@/mui/components';

import styles from './FormRowItem.module.scss';

const minHeight = {
  xSmall: xSmallSize,
  small: smallSize,
  medium: mediumSize,
  large: largeSize,
};

/**
 * FormRowItem Component
 *
 * A component that renders a row item within a form with dynamic styling based on form context and static width.
 *
 * @param {object} props - Component properties.
 * @param { 1 | 2 | 3 | 4 | undefined } props.itemsInRow - Static width for the item,
 * determining its style class.
 * @param {React.ReactNode} props.children - The child components to be rendered inside the row item.
 *
 * @returns {JSX.Element} The rendered FormRowItem component.
 *
 * @example
 * ```jsx
 * <FormRowItem staticWidth="small">
 *   <FormField label="First Name" />
 * </FormRowItem>
 * ```
 */
function FormRowItem(props) {
  const theme = useTheme();
  const { size } = useFormSettings();

  const { itemsInRow, ...boxProps } = props;

  return (
    <Box
      component="div"
      {...boxProps}
      className={classNames(styles.Item, {
        [styles.Item___basic]: !itemsInRow,
      })}
      style={{
        flexShrink: isInRange(itemsInRow, 2, 4) ? 0 : null,
        flexBasis: isInRange(itemsInRow, 2, 4)
          ? `calc((100% - ((${theme.spacing()} * ${ITEM_SPACE}) * ${itemsInRow - 1})) / ${itemsInRow})`
          : null,
        width: isInRange(itemsInRow, 2, 4)
          ? `calc((100% - ((${theme.spacing()} * ${ITEM_SPACE}) * ${itemsInRow - 1})) / ${itemsInRow})`
          : null,
        minHeight: minHeight[size],
      }}
    >
      {props.children}
    </Box>
  );
}

export default FormRowItem;
