import * as React from 'react';
import { createComponent, createElement, createHook, useOptionsState } from 'bumbag/utils';
import { Palette } from 'bumbag/types';

import { Box, BoxProps } from '../Box';
import * as styles from './Menu.styles';

export type LocalMenuOptionGroupProps = {
  alignCheck: 'left' | 'right';
  defaultValue?: Array<string> | string;
  disableLeftPadding?: boolean;
  hasDividers?: boolean;
  onChange?: (values: Array<string> | string, value: string) => void;
  palette?: Palette;
  type: 'checkbox' | 'radio';
  value?: Array<string> | string;
};
export type MenuOptionGroupProps = BoxProps & LocalMenuOptionGroupProps;

const useProps = createHook<MenuOptionGroupProps>(
  (props) => {
    const {
      alignCheck,
      children,
      defaultValue,
      disableLeftPadding,
      hasDividers,
      palette,
      onChange,
      type,
      value,
      ...restProps
    } = props;

    const { getOptionItemProps } = useOptionsState({
      defaultValue,
      onChange,
      type,
      value,
    });

    const menuGroupProps = Box.useProps({
      ...restProps,
      children: React.Children.map(children, (child, i) => {
        if (!React.isValidElement(child)) return child;
        return React.cloneElement(child, {
          ...child.props,
          ...getOptionItemProps({ value: child.props?.value }),
          alignCheck,
          hasDivider: hasDividers && i < (children as any).length - 1,
          disableLeftPadding,
          palette,
          overrides: props.overrides,
        });
      }),
    });

    return {
      ...menuGroupProps,
    };
  },
  { themeKey: 'native.Menu.OptionGroup' }
);

export const MenuOptionGroup = createComponent<MenuOptionGroupProps>(
  (props) => {
    const htmlProps = useProps(props);
    return createElement({
      children: props.children,
      component: styles.MenuOptionGroup,
      htmlProps,
    });
  },
  {
    attach: {
      useProps,
      displayName: 'native.Menu.OptionGroup',
    },
    themeKey: 'native.Menu.OptionGroup',
  }
);