import React, { useMemo, useContext } from 'react';
import { LionTestTableContext } from '../../testTable';
import { evalExpression } from '../../../../../../utils/tpl';
import { render as renderAmis } from '../../../../../../index';
import Button from 'antd/lib/button';
import Popover from 'antd/lib/popover';
import './index.scss'
import '../../style/baseCss/popover.scss'

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

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

const GenericOperationContainer: React.FC<GenericOperationProps> = (props) => {
  const { buttons, seat, rightTableWidth } = props;

  let className = 'tbody-td--column thead-th--column tbody-td--opreation' + (seat === 'right' ? ' lion-cell--fix--right' : '')

  const OperateElement = ({ children }: any): JSX.Element => {
    return <td className={className}>
      {children}
    </td>
  }

  if (!(seat === 'right')) return (
    <OperateElement>
      <div className="tbody-td--column--surface--hide">
      </div>
    </OperateElement>
  );

  if (!buttons?.length) return (
    <OperateElement>
      <div className="lion-cell--fix--right--cell" style={{ width: rightTableWidth }}>
      </div>
    </OperateElement>
  );

  return <GenericOperation {...props} RenderOperateContainer={OperateElement}></GenericOperation>

}

const GenericOperation: React.FC<GenericOperationProps & { RenderOperateContainer: (props: any) => JSX.Element }> = (
  {
    rightTableWidth,
    buttons,
    source,
    RenderOperateContainer,
    limitNum = buttons?.length
  }
) => {

  const {
    env,
    handleAction,
    primaryField
  } = useContext(LionTestTableContext)

  const btnList = useMemo(() => {
    return buttons!.filter((item: CellProperty) => {
      return !evalExpression(item?.hiddenOn ?? '', source)
    })
  }, [buttons, source])

  return <RenderOperateContainer>
    <div className="lion-cell--fix--right--cell" style={{ width: rightTableWidth }}>
      <div className="tbody-td--opreation--list">
        {
          btnList.slice(0, limitNum).map((item: CellProperty, index: number) => {
            return renderAmis({
              ...item as any,
              // Jay
              type: item.type !== 'label-print' ? item.type : 'button'
            }, {
              data: source,
              ids: source[primaryField!],
              primaryField: primaryField,
              onAction: handleAction
            }, {
              fetcher: env?.fetcher as any,
              session: env?.session
            })
          })
        }
        {
          btnList?.length <= limitNum! ? null : <Popover
            placement='bottomRight'
            arrowPointAtCenter
            getPopupContainer={env?.getModalContainer}
            trigger="click"
            overlayClassName="lion-table-cell-btn"
            overlayStyle={{
              paddingTop: 0
            }}
            overlayInnerStyle={{
              padding: 0
            }}
            content={() => {
              return <div className="lion-export-popover">
                <div className="lion-export-popover-container">
                  <div className="lion-export-popover-hide">
                    <ul style={{ [btnList.slice(limitNum!)?.length <= 1 ? 'padding' : '']: 0 }}>
                      {
                        btnList.slice(limitNum).map((item: CellProperty, idx: number) => {
                          return <div style={{ margin: '5px' }} key={idx} data-index={idx} >{
                            renderAmis({
                              ...item as any
                            }, {
                              data: source,
                              ids: source[primaryField!],
                              primaryField: primaryField,
                              onAction: handleAction,
                              className: 'lion-td-btn'
                            }, {
                              fetcher: env?.fetcher as any,
                              session: env?.session
                            })
                          }</div>
                        })
                      }
                    </ul>
                  </div>
                </div>
              </div>
            }}
          >
            <Popover
              placement='top'
              arrowPointAtCenter
              getPopupContainer={env?.getModalContainer}
              trigger="hover"
              overlayStyle={{
                paddingTop: 0
              }}
              overlayInnerStyle={{
                padding: 0
              }}
              overlayClassName="lion-table-cell-btn lion-table-cell-btn-hide"
              content={() => {
                return <div className="lion-table-cell-btn-hide--text">更多内容</div>
              }}
            >
              <Button className="lion-cell-btn--ellipsis" icon={<span style={{ fontSize: '20px' }} className="fa fa-ellipsis-h"></span>} type="link" ></Button>
            </Popover>
          </Popover>
        }
      </div>
    </div>
  </RenderOperateContainer >
}

export {
  GenericOperationContainer
}