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

import { BoxProps, BoxTouchable, BoxTouchableProps } from '../Box';
import { Flex } from '../Flex';
import { Icon, IconProps } from '../Icon';
import { TextProps } from '../Text';
import * as styles from './Menu.styles';

export type LocalMenuItemProps = {
  disabled?: boolean;
  hasDivider?: boolean;
  isStatic?: boolean;
  after?: React.ReactElement;
  before?: React.ReactElement;
  disableLeftPadding?: boolean;
  iconAfter?: IconProps['icon'];
  iconAfterProps?: Partial<IconProps>;
  iconBefore?: IconProps['icon'];
  iconBeforeProps?: Partial<IconProps>;
  afterWrapperProps?: Partial<BoxProps>;
  beforeWrapperProps?: Partial<BoxProps>;
  contentProps?: Partial<BoxProps>;
  contentTextProps?: Partial<TextProps>;
};
export type MenuItemProps = BoxTouchableProps & LocalMenuItemProps;

const useProps = createHook<MenuItemProps>(
  (props) => {
    const {
      after,
      before,
      afterWrapperProps,
      beforeWrapperProps,
      contentProps,
      contentTextProps,
      disabled,
      hasDivider,
      iconAfter,
      iconAfterProps,
      iconBefore,
      iconBeforeProps,
      isStatic,
      disableLeftPadding,
      overrides,
    } = props;
    const boxTouchableProps = BoxTouchable.useProps(props);
    return {
      ...boxTouchableProps,
      activeOpacity: isStatic ? 1 : 0.2,
      focusable: !disabled && !isStatic,
      children: (
        <React.Fragment>
          {!disableLeftPadding && (before || iconBefore) && (
            <styles.MenuItemBeforeWrapper overrides={overrides} {...beforeWrapperProps}>
              {iconBefore && <Icon icon={iconBefore} overrides={overrides} {...iconBeforeProps} />}
              {before}
            </styles.MenuItemBeforeWrapper>
          )}
          <styles.MenuItemContent
            hasDivider={hasDivider}
            disabled={disabled}
            isStatic={isStatic}
            disableLeftPadding={disableLeftPadding}
            _hoveractive
            overrides={overrides}
            {...contentProps}
          >
            <Flex>
              {disableLeftPadding && (before || iconBefore) && (
                <styles.MenuItemBeforeWrapper overrides={overrides} {...beforeWrapperProps}>
                  {iconBefore && <Icon icon={iconBefore} overrides={overrides} {...iconBeforeProps} />}
                  {before}
                </styles.MenuItemBeforeWrapper>
              )}
              <styles.MenuItemContentText overrides={overrides} {...contentTextProps}>
                {props.children}
              </styles.MenuItemContentText>
            </Flex>
            {(after || iconAfter) && (
              <styles.MenuItemAfterWrapper overrides={overrides} {...afterWrapperProps}>
                {iconAfter && <Icon overrides={overrides} icon={iconAfter} {...iconAfterProps} />}
                {after}
              </styles.MenuItemAfterWrapper>
            )}
          </styles.MenuItemContent>
        </React.Fragment>
      ),
    };
  },
  { defaultProps: { _hover: true, _focus: true, _active: true, _hoveractive: true }, themeKey: 'native.Menu.Item' }
);

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