import { SWITCH, arrayInsertInterval, callable, classNames } from 'mixlea-utils-js';
import { MlButton } from '../ml-button';
import type { ButtonListButtonItem, MlButtonListProps } from './types';
import { View } from '@tarojs/components';

export type { MlButtonListProps, ButtonListButtonItem };

export function MlButtonList(props: MlButtonListProps) {
  const { gapX = 'xs', seperator, buttons, ...buttonBaseProps } = props;

  const buttonElements = buttons
    // 处理按钮显示
    .filter(({ visible = true }) => callable(visible))
    .filter(({ hidden = false }) => !callable(hidden))
    // 渲染元素
    .map((buttonProps, btnIndex) => <MlButton key={btnIndex} {...buttonBaseProps} {...buttonProps} />);

  return (
    <View
      className={classNames(
        'flex items-center',
        {
          'h-full': props.height === 'full',
        },
        SWITCH(gapX, {
          mini: 'gap-x-mini',
          xs: 'gap-x-xs',
          sm: 'gap-x-sm',
          base: 'gap-x-base',
          md: 'gap-x-md',
          lg: 'gap-x-lg',
          xl: 'gap-x-xl',
        }),
      )}
    >
      {seperator
        ? arrayInsertInterval(buttonElements, (btnIndex) => (
            <View key={`seperator${btnIndex}`} className="border-l h-4"></View>
          ))
        : buttonElements}
    </View>
  );
}