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

import { useFormGroupSettings, useFormSettings } from '@/modules/@common/Form/helpers/hooks';

import { Stack, Tooltip, Typography } from '@/mui/components';

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

const sizes = {
  small: {
    variant: 'body2',
    spacing: 1.5,
  },
  medium: {
    variant: 'body2',
    spacing: 2,
  },
};

/**
 * 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.
 */
function Label(props) {
  const { size } = useFormSettings();
  const groupIntent = useFormGroupSettings();
  const theme = useTheme();
  const { variant, spacing } = sizes[size];

  return (
    <Stack
      direction="row"
      alignItems="flex-start"
      justifyContent="flex-start"
      spacing={1}
      className={styles.Label}
      style={{
        paddingTop: theme.spacing(spacing),
        width: `calc(var(--internal-label-width) - ${theme.spacing(groupIntent)})`,
      }}
    >
      <Typography component="div" variant={variant} className={styles.LabelContent}>
        {props.children}
      </Typography>
      {props.tooltip && (
        <Tooltip title={<div className={styles.Tooltip}>{props.tooltip}</div>}>
          <InfoOutlined fontSize="small" htmlColor="info.main" className={styles.TooltipInfo} />
        </Tooltip>
      )}
    </Stack>
  );
}

export default Label;
