import * as React from 'react';
import { CnDialog, CnMenu, CnMenuItem, CnBadge } from '@cainiaofe/cn-ui';
import type { CnActionSheetProps } from '@cainiaofe/cn-ui-m';
import { getDataSource } from './utils';

const propsRender = (props: CnActionSheetProps) => {
  const { message, options, disabledIndexes, onClick, ...rest } = props;
  const dataSource = getDataSource(options);
  const disabledIndexesSet = new Set(disabledIndexes);

  return {
    title: message,
    footer: false,
    closeMode: ['mask', 'close', 'esc'],
    ...rest,
    content: (
      <div>
        <CnMenu>
          {dataSource.map((item, index) => (
            <CnMenuItem
              onClick={(e) => onClick(item.originalItem, index, e)}
              disabled={disabledIndexesSet.has(index)}
              {...item}
            >
              {item.text}
              {item.badge && (
                <CnBadge shape={item.badgeType} style={{ marginLeft: 8 }}>
                  {item.badge}
                </CnBadge>
              )}
            </CnMenuItem>
          ))}
        </CnMenu>
      </div>
    ),
  };
};

export const CnActionSheet = (props: CnActionSheetProps) => {
  const dialogProps = propsRender(props);
  dialogProps.children = dialogProps.content;

  return <CnDialog {...dialogProps} />;
};

CnActionSheet.show = (props) => {
  const dialogProps = propsRender(props);
  dialogProps.children = dialogProps.content;

  return CnDialog.show(dialogProps);
};