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

interface GenericSubordinateProps {
  fixColumns: any[];
  source?: any;
  trClick?: () => void;
  subordinateElevae: number;
  colHide: boolean;
  subId: any;
}

const SubordinateAreaContainer: React.FC<{
  columns: any[],
  source: any
}> = ({
  columns,
  source
}) => {
    return <>
      {
        columns?.map((column: any) => {
          if (column?.name === "checkbox" || column?.buttons) return null;
          return (
            <td
              className="tbody-td--column"
            >
              <div style={{ width: column?.width ? column?.width : 50, fontSize: '12px' }} className='tbody-td--column--cell'>
                <span className="tbody-td--column--cell--container">
                  {
                    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} className="tbody-td--column--cell--item">
                          {
                            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 <div className="tbody-td--column--cell--item" key={_}>
                        {/* {
                          column?.hideLabel ? null : <span style={{ color: '#999' }}>{column?.label}：</span>
                        } */}
                        <span>{column.type ? temp_element : source[column?.name]}</span>
                      </div>
                    })
                  }
                </span>
              </div>
            </td>
          )
        })
      }
    </>

  }

const SubordinateTr: React.FC<GenericSubordinateProps> = ({
  colHide, subordinateElevae, fixColumns, source, trClick, subId
}) => {

  // const subordinateList = useMemo(() => {
  //   if (colHide) return Array.from({ length: subordinateQuantity ?? 0 })
  //   return Array.from({ length: subordinateQuantity ?? 0 }).slice(0, 4)
  // }, [colHide, subordinateQuantity])
  const subordinateList = useMemo(() => {
    if (colHide) return source
    return source.slice(0, 4)
  }, [colHide, source])


  return subordinateList.map((item: any, trIndex: number) => {
    return (
      <tr
        className="tbody-tr--column--common tbody-tr--column--white"
        key={trIndex}
        style={{
          height: subordinateElevae
        }}
        onMouseOut={() => { }}
      // onMouseOver={trClick}
      >
        <td className="tbody-td--column">
        </td>
        <SubordinateAreaContainer
          source={item}
          columns={fixColumns}
        />
        <td className="tbody-td--column thead-th--column tbody-td--opreation">
        </td>
      </tr>
    )
  })
}
export {
  SubordinateTr
}