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

import Label from './components/Label/Label';
import Value from './components/Value/Value';
import { Stack } from '@/mui/components';

/**
 * FormRow Component
 *
 * A component that renders a row within a form with optional label and tooltip,
 * supporting multiline content and various layout options.
 *
 * @param {object} props - Component properties.
 * @param {React.ReactNode} props.children - The child components to be rendered inside the form row.
 * @param {string} [props.label] - The label text for the form row.
 * @param {string} [props.tooltip] - The tooltip text to be displayed alongside the label.
 * @param {string} [props.justifyContent='flex-start'] - CSS justify-content property for the row content.
 * @param {boolean} [props.multiline=false] - If true, the row content will wrap to multiple lines.
 * @param {boolean} [props.fullWidth=false] - If true, the row content will take the full width of the container.
 *
 * @returns {JSX.Element} The rendered FormRow component.
 *
 * @example
 * ```jsx
 * <FormRow label="Name" tooltip="Please enter your full name" multiline>
 *   <FormField label="First Name" />
 *   <FormField label="Last Name" />
 * </FormRow>
 * ```
 */
function FormRow(props) {
  const { label, tooltip, multiline, justifyContent, fullWidth, scrollable, children, ...forRowProps } = props;
  const theme = useTheme();

  return (
    <Stack {...forRowProps} spacing={theme.spacing(3, 10)} direction="row" fullWidth flexWrap="wrap">
      {(label || label === '') && <Label tooltip={tooltip}>{label === true ? '' : label}</Label>}
      {children && (
        <Value
          scrollable={!!scrollable}
          justifyContent={justifyContent ?? 'flex-start'}
          flexWrap={multiline ? 'wrap' : 'nowrap'}
          fullWidth={!!fullWidth}
          multiline={!!multiline}
        >
          {children}
        </Value>
      )}
    </Stack>
  );
}

export default FormRow;
