import React from 'react';
import { WrapperCommonSurfaceGroup } from '../../style';
import { evalExpression } from '../../../../../../utils/tpl';
import { render as renderAmis } from '../../../../../../index';

interface CellProperty {
  label?: string;
  name?: string;
  type?: string;
  group?: Array<CellProperty>;
  hiddenOn?: string;
  [propName: string]: any;
}

interface GenericOperationProps {
  className?: string;
  seat?: 'left' | 'right' | 'center';
  rightTableWidth?: number;
  buttons?: Array<CellProperty>;
  source: any;
  limitNum?: number;
  fixColumns?: any[]
}


interface GenericSurfaceMainAreaProps {
  source: any;
  btnLen?: number;
  list_columns?: any[]
  fixColumns?: any[];
  surfaceItemWidth?: number
}

const GenericSurfaceMainArea: React.FC<GenericSurfaceMainAreaProps> =
  (
    { btnLen,
      fixColumns,
      list_columns,
      surfaceItemWidth,
      source
    }
  ) => {
    return (
      <td
        className="tbody-td--column thead-th--column tbody-td--column--surface--mainarea"
        colSpan={btnLen ? fixColumns?.length! - 2 : fixColumns?.length}
      >
        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
          {
            list_columns!.map((item: any, index: number) => {
              if (item?.buttons) return null
              return (
                <WrapperCommonSurfaceGroup
                  key={index}
                  style={{
                    width: item?.width ? item?.width : surfaceItemWidth,
                    paddingLeft: index === 0 ? '5px' : ''
                  }}
                >
                  <div className="surface-group-container" style={{
                    flexDirection: item?.group?.length > 1 ? 'column' : 'row',
                    justifyContent: item?.group?.length > 1 ? 'center' : 'normal',
                    alignItems: item?.group?.length > 1 ? 'normal' : 'center'
                  }}>
                    {
                      item?.group?.length > 0 ? item?.group?.map((group: any, groupIndex: number) => {
                        let hide = group?.hiddenOn ? evalExpression(group?.hiddenOn, { ...source }) : false;
                        if (hide) return null;
                        let temp_element;
                        if (group?.type) {
                          temp_element = renderAmis({
                            type: group?.type,
                            name: group?.name,
                            body: group?.body
                          }, {
                            data: source
                          })
                        }
                        return (
                          <span
                            key={groupIndex}
                            className="surface-group-item"
                          >
                            {
                              group?.hideLabel ? (
                                group.type ? temp_element : source[group?.name]
                              ) : <><span
                                className="surface-group-item--label"
                              >
                                {group.label}：
                              </span>{group.type ? temp_element : source[group?.name]}</>
                            }
                          </span>
                        )
                      }) : [''].map((_) => {
                        let temp_element;
                        let hide = item?.hiddenOn ? evalExpression(item?.hiddenOn, { ...source }) : false;
                        if (hide) return null
                        if (item.type) {
                          temp_element = renderAmis({
                            type: item.type,
                            name: item.name,
                            body: item?.body
                          }, {
                            data: source
                          });
                        }

                        return <span
                          key={_}
                          className="surface-group-item"
                        >
                          {item?.hideLabel ? (item.type ? temp_element : source[item?.name]) : <><span
                            className="surface-group-item--label"
                          >
                            {item.label}：
                          </span>{item.type ? temp_element : source[item?.name]}</>}
                        </span>
                      })
                    }
                  </div>

                </WrapperCommonSurfaceGroup>
              )
            })
          }
        </div>

      </td>
    )
  }

export {
  GenericSurfaceMainArea
}