import { View } from '@tarojs/components';
import { arrayGroupMap, callable, classNames, deepGet } from 'mixlea-utils-js';

import { FormHeader } from './form-header';
import type { MlBaseFormColumn, MlBaseFormData, MlBaseFormProps } from './types';
import { FormFooter } from './form-footer';
import { FormBody } from './form-body';
import { FormGroupColumns } from './form-group-columns';
import safeGetCellContent from './tools/safe-get-cell-content';
import mergeCellProps from './tools/merge-cell-props';
import safeGetCellValue from './tools/safe-get-cell-value';

export type { MlBaseFormProps, MlBaseFormColumn, MlBaseFormData };

export { mergeCellProps, safeGetCellValue };

export function MlBaseFrom(props: MlBaseFormProps) {
  console.log('props: ', props);

  return (
    <View
      className={classNames('flex flex-col', props.className)}
      style={{
        // @ts-expect-error CSS Vars
        '--grid-col-number': callable(props.cols, { columns: props.columns }) ?? 1,
      }}
    >
      <FormHeader {...props} />
      <FormBody {...props}>
        {Array.from(arrayGroupMap(props.columns, (column) => column.grouping)).map(([groupKey, columns], index) => {
          return (
            <FormGroupColumns key={`${groupKey}${index}`} {...props}>
              {columns.map((column) => {
                const formData = props.formData;

                const cellValue = deepGet(props.formData, column.field, undefined);

                const cellProps = column.getCellProps?.(cellValue, props.formData) ?? {};

                const headerProps = column.getHeaderProps?.(cellValue, props.formData) ?? {};
                const contentProps = column.getContentProps?.(cellValue, props.formData) ?? {};

                const contentLeft = column.renderLeft?.({ cellValue, formData: props.formData }) ?? undefined;
                const contentRight = column.renderRight?.({ cellValue, formData: props.formData }) ?? undefined;

                const colSpanAll = callable(column.colSpanAll, {
                  cellValue,
                  formData,
                });

                return (
                  <View
                    key={column.field}
                    className={classNames(cellProps.className, 'form-cell flex', {
                      'col-span-full': colSpanAll,
                    })}
                  >
                    <View
                      {...headerProps}
                      style={headerProps.style}
                      className={classNames(headerProps.className, 'form-cell-header h-full')}
                    >
                      {column.title}
                    </View>
                    {contentLeft && <View> {contentLeft}</View>}
                    <View
                      {...contentProps}
                      style={contentProps.style}
                      className={classNames(contentProps.className, 'form-cell-content h-full flex-1 min-w-0')}
                    >
                      {safeGetCellContent(column, props.formData)}
                    </View>
                    {contentRight && <View> {contentRight}</View>}
                  </View>
                );
              })}
            </FormGroupColumns>
          );
        })}
      </FormBody>
      <FormFooter {...props} />
    </View>
  );
}