import { View } from '@tarojs/components';
import { classNames } from 'mixlea-utils-js';
import type { PropsWithChildren } from 'react';
import type { MlBaseFormProps } from './types';

export function FormGroupColumns({
  rowHeightSize = 'sm',
  columnTitleWordNumber = 4,
  children,
}: PropsWithChildren<MlBaseFormProps>) {
  return (
    <View
      className={classNames(
        'grid bg-[--block-bg-color]',

        // '[&_*.form-cell]:border-r',
        // '[&_*.form-cell]:border-b',
        // '[&_*.form-cell]:border-black',

        // '[&_*.form-cell.col-span-full]:border-t',
        // '[&_*.form-cell.col-span-full]:-ml-[1px]',

        '[&_*.form-cell]:border-b',
        '[&_*.form-cell]:border-r',

        '[&_*.form-cell:not(.col-span-full)+*.form-cell.col-span-full]:border-t',

        {
          '[&_*.form-cell]:h-[--h-mini]': rowHeightSize === 'mini',
          '[&_*.form-cell]:leading-[--h-mini]': rowHeightSize === 'mini',
          '[&_*.form-cell]:h-[--h-sm]': rowHeightSize === 'sm',
          '[&_*.form-cell]:leading-[--h-sm]': rowHeightSize === 'sm',
          '[&_*.form-cell]:h-[--h-base]': rowHeightSize === 'base',
          '[&_*.form-cell]:leading-[--h-base]': rowHeightSize === 'base',
        },

        '[&_*.form-cell-header]:pl-base',
        {
          '[&_*.form-cell-header]:w-20': columnTitleWordNumber === 4,
          '[&_*.form-cell-header]:w-24': columnTitleWordNumber === 5,
          '[&_*.form-cell-header]:w-28': columnTitleWordNumber === 6,
        },

        '[&_*.form-cell-content]:pl-base',
      )}
      style={{ gridTemplateColumns: 'repeat(var(--grid-col-number), minmax(0, 1fr))' }}
    >
      {children}
    </View>
  );
}