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

import { ITEM_SPACE } from '@/modules/@common/Form/constants';

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

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

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

/**
 * 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.tooltip] - The tooltip text to be displayed alongside the label.
 * @param {string} props.justifyContent - CSS justify-content property for the row content.
 * @param {'wrap' | 'no-wrap'} props.flexWrap - CSS justify-content property for the row content.
 * @param {boolean} props.multiline - 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 Value(props) {
  const theme = useTheme();
  const containerRef = useRef(null);
  const groupIntent = useFormGroupSettings();
  const [scrollShadows, setScrollShadows] = useState({ left: false, right: false });

  const handleScroll = () => {
    const container = containerRef.current;

    if (container) {
      const { scrollLeft, scrollWidth, clientWidth } = container;

      setScrollShadows({
        left: scrollLeft > 0,
        right: scrollLeft + clientWidth < scrollWidth,
      });
    }
  };

  useEffect(() => {
    if (props.scrollable) {
      window.addEventListener('resize', handleScroll);
      handleScroll(); // Initialize shadows on mount
    }

    return () => {
      window.removeEventListener('resize', handleScroll);
    };
  }, [props.scrollable]);

  return (
    <div
      style={{
        flex: `1 1 calc((var(--internal-minimal-wrap-size) - ${theme.spacing(groupIntent)}) / 2)`,
      }}
      className={classNames(styles.Value, {
        [styles.Value___leftShadow]: props.scrollable && scrollShadows.left,
        [styles.Value___rightShadow]: props.scrollable && scrollShadows.right,
      })}
    >
      <Stack
        ref={containerRef}
        direction="row"
        alignItems="flex-start"
        fullWidth={props.fullWidth}
        onScroll={props.scrollable ? handleScroll : undefined}
      >
        <Stack
          direction="row"
          alignItems="flex-start"
          justifyContent={props.justifyContent}
          flexWrap={props.flexWrap}
          spacing={theme.spacing(ITEM_SPACE, ITEM_SPACE)}
          fullWidth={props.fullWidth}
          className={classNames(styles.ValueContent, {
            [styles.ValueContent___fullWidth]: props.fullWidth,
          })}
        >
          {props.children}
        </Stack>
      </Stack>
    </div>
  );
}

export default Value;
