import React, { FunctionComponent, ReactNode } from 'react';
import { View, Text } from 'react-native';

import { useConfig } from '../configprovider';
import cellGroupStyles from './styles';

export interface CellGroupProps {
  title: ReactNode; // 分组标题
  desc: ReactNode; // 分组描述
  titleSlot: ReactNode;
  descSlot: ReactNode;
  children?: ReactNode;
}
const defaultProps = {
  title: '',
  desc: '',
  titleSlot: null,
  descSlot: null,
} as CellGroupProps;

export const CellGroup: FunctionComponent<Partial<CellGroupProps>> = (
  props
) => {
  const { children, title, desc, titleSlot, descSlot } = {
    ...defaultProps,
    ...props,
  };

  const { theme } = useConfig();

  const styles = cellGroupStyles(theme);

  let cloneChildren: any = children;

  if (
    Array.isArray(cloneChildren) ||
    Object.prototype.toString.call(cloneChildren) === '[object Object]'
  ) {
    if (Array.isArray(cloneChildren)) {
      cloneChildren = cloneChildren.map((o: any, i: any) => {
        return React.cloneElement(o, {
          key: i,
          cellGroup: true,
          isLast: i + 1 == cloneChildren.length,
        });
      });
    } else {
      cloneChildren = React.cloneElement(cloneChildren, {
        cellGroup: true,
        isLast: true,
      });
    }
  }

  const wrapStyle = [styles.container];

  return (
    <View style={wrapStyle}>
      {titleSlot || (
        <>
          {title ? (
            <View style={styles.titleContainer}>
              <Text style={styles.title}>{title}</Text>
            </View>
          ) : null}
        </>
      )}

      {descSlot || (
        <>
          {desc ? (
            <View style={styles.descContainer}>
              <Text style={styles.desc}>{desc}</Text>
            </View>
          ) : null}
        </>
      )}

      <View style={styles.wrap}>{cloneChildren}</View>
    </View>
  );
};

CellGroup.defaultProps = defaultProps;
CellGroup.displayName = 'NutCellGroup';