import { FiltersMap } from '@wix/bex-core';
import { observer } from 'mobx-react-lite';
import React, { MouseEventHandler, ReactElement } from 'react';
import { Box, Divider, TextButton, TextButtonProps } from '@wix/design-system';
import { PickerStandaloneState } from '../../state';
import { Add as AddIcon } from '@wix/wix-ui-icons-common';

export interface PickerStandaloneLayoutFooterProps<
  T,
  F extends FiltersMap = FiltersMap,
> {
  state: PickerStandaloneState<T, F>;
  createNewAction?: ReactElement<TextButtonProps>;
}

function _PickerStandaloneLayoutFooter<T, F extends FiltersMap = FiltersMap>(
  props: PickerStandaloneLayoutFooterProps<T, F>,
) {
  const { state, createNewAction } = props;

  return (
    <>
      <Divider />
      <Box
        paddingLeft="SP4"
        paddingRight="SP4"
        paddingTop="SP3"
        paddingBottom="SP3"
        verticalAlign="middle"
      >
        {createNewAction && (
          <TextButton
            key={createNewAction.key}
            dataHook="create-new-item-cta"
            {...(createNewAction.props as {})}
            prefixIcon={<AddIcon />}
            suffixIcon={undefined}
            onClick={(e: React.MouseEvent<HTMLElement, MouseEvent>) => {
              state.onCreateNewClick();
              const buttonProps = createNewAction.props as
                | {
                    onClick?: MouseEventHandler<HTMLElement>;
                  }
                | undefined;
              buttonProps?.onClick?.(e);
            }}
          />
        )}
      </Box>
    </>
  );
}
export const PickerStandaloneLayoutFooter = observer(
  _PickerStandaloneLayoutFooter,
);