import React, { useContext, useMemo } from 'react';
import { evalExpression } from '../../../../../../utils/tpl';
import { render as renderAmis } from '../../../../../../index';

interface GenericSubordinateAreaProps {
  source: any;
  btnLen?: number;
  list_columns?: any[]
  columns?: any[];
  seat?: 'left' | 'right' | 'center';
  surfaceItemWidth?: number
}

const GenericSubordinateArea: React.FC<GenericSubordinateAreaProps> = (
  {
    columns,
    seat,
    source
  }
) => {
  const className = "tbody-td--column" + (seat ? " fix--hidden" : "");
  return <>
    {
      columns?.map((column: any, index: number) => {
        if (column?.name === "checkbox" || column?.buttons) return null;

        return (
          <td
            className={className}
          >
            <div style={{ width: column?.width ? column?.width : 50, fontSize: '12px' }} className='tbody-td--column--cell'>
              <span style={{ width: column?.width ? column?.width : 50 }}>
                {
                  !seat && (
                    column?.group?.length > 0 ? column?.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 (
                        <div key={groupIndex} style={{ display: 'flex' }}>
                          {
                            group?.hideLabel ? null : <span style={{ color: '#999' }}>{group?.label}：</span>
                          }
                          <span>{group.type ? temp_element : source[group?.name]}</span>
                        </div>
                      )
                    }) : [''].map((_) => {
                      let temp_element;
                      let hide = column?.hiddenOn ? evalExpression(column?.hiddenOn, { ...source }) : false;
                      if (hide) return null
                      if (column.type) {
                        temp_element = renderAmis({
                          type: column.type,
                          name: column.name,
                          body: column?.body
                        }, {
                          data: source
                        });
                      }

                      return <>
                        {
                          column?.hideLabel ? null : <span style={{ color: '#999' }}>{column?.label}：</span>
                        }
                        <span>{column.type ? temp_element : source[column?.name]}</span>
                      </>
                    })
                  )
                }
              </span>
            </div>
          </td>
        )
      })
    }
  </>

}

export {
  GenericSubordinateArea
}