import React, {
  CSSProperties,
  ReactNode,
} from 'react';

import useAppConfigStore, { useAppConfig } from '@/stores/appConfig';

// Типы для размеров колонок (1–24 или undefined)
type ColSize = number | undefined;

interface ColProps {
  col?: ColSize;
  row?: number;
  children?: ReactNode;
  style?: CSSProperties;
  className?: string;
  inline?: boolean;
}

const ColCSS: React.FC<ColProps> = ({ col, row = 1, className, children, style, inline = false }) => {

  const { isMobile } = useAppConfigStore();

  const colSpan = isMobile ? 24 : col ?? 24;
  const rowSpan = Math.max(1, row);
  const colStyle: CSSProperties = {
    gridColumn: `span ${colSpan}`,
    ...(rowSpan > 1 ? { gridRow: `span ${rowSpan}` } : {}),
    minWidth: 0,
    ...style,
  };

  if (inline) {
    return <div>{children}</div>
  }

  return <div className={className} style={colStyle}>{children}</div>;
};

interface RowProps {
  children: ReactNode;
  style?: CSSProperties;
  gap?: number;
  align?: 'top' | 'middle' | 'bottom';
  justify?: 'start' | 'end' | 'center' | 'space-around' | 'space-between';
  className?: string;
  inline?: boolean;
}

const alignItemsMap: Record<NonNullable<RowProps['align']>, CSSProperties['alignItems']> = {
  top: 'start',
  middle: 'center',
  bottom: 'end',
};

const RowCSS: React.FC<RowProps> = ({ children, style, gap, justify, align, className, inline = false }) => {

  const rowStyle: CSSProperties = {
    display: 'grid',
    gridTemplateColumns: 'repeat(24, minmax(0, 1fr))',
    gridAutoFlow: 'row',
    ...style,
  };

  if (gap) {
    rowStyle.gap = `${gap}px`;
  }

  if (justify) {
    rowStyle.justifyContent = justify;
  }

  if (align) {
    rowStyle.alignItems = alignItemsMap[align];
  }

  if (inline) {
    return <div>{children}</div>
  }

  return <div style={rowStyle} className={className}>{children}</div>;
};

export { ColCSS, RowCSS };
