import React, { useEffect, useState, useRef } from 'react';
import { Icon } from '@alifd/next';
import { ActionSheet } from '@alifd/meet-react';
import cn from 'classnames';
import './index.scss';

/**
 * actionBar: 
 * [{
        title: '新增',
        type: 'primary',
        icon: 'add',
        onClick: () => console.log('新增操作'),
    }, {
        title: '导入数据',
    }]
 * 
 * @param props 
 * @returns 
 */
function Action(props) {
  const [visible, setVisible] = useState(false);
  const { actionColumns, record, index: dsIndex, className } = props;

  const filterHiddenColumns = (actions) => {
    if (!actions) return [];
    return actions.filter((item) => {
      const { hidden = () => {}, render } = item;
      return !(hidden({ value: undefined, index: dsIndex, record }) || render);
    });
  };

  const columns = filterHiddenColumns(actionColumns);

  const transferOpts = (actions) => {
    return actions.map((item) => {
      const { title, icon } = item;
      // 这里的icon需要是一个img标签的cdn地址，暂时先不支持吧
      return {
        text: title,
      };
    });
  };

  const onSheetClick = (option, index, e) => {
    const { onClick = () => {} } = columns[index];
    e?.stopPropagation();
    e?.nativeEvent?.stopImmediatePropagation();
    onClick({ record, index: dsIndex });
    // setVisible(false);
  };

  const onTriggerClick = (e) => {
    e.stopPropagation();
    e?.nativeEvent?.stopImmediatePropagation();
    setVisible(true);
  };

  return (
    <>
      <div className={cn('oc-action', className)} onClick={onTriggerClick}>
        <Icon type="ellipsis" />
      </div>

      <ActionSheet
        visible={visible}
        message="请选择"
        // @ts-ignore
        onClose={(reason, e) => {
          e?.stopPropagation();
          e?.nativeEvent?.stopImmediatePropagation();
          setVisible(false);
        }}
        onClick={onSheetClick}
        options={transferOpts(columns)}
      />
    </>
  );
}

export default Action;