import * as React from 'react';
import styled from '@emotion/styled';

import { Flex, Box } from '@lightspeed/flame/Core';
import { SearchInputFlex } from './SearchBar';

// TODO: this is a hack, we need to clean it up by targetting the Input
// directly instead of using universal selectors.
const FlexGroupHack = styled(Flex)`
  .cr-table-search-bar-dropdown + .cr-table-search-bar-form {
    ${SearchInputFlex as any} {
      margin-left: -3px;
      * {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }
  }
`;

interface Props {
  leftHandActions?: React.ReactNode;
  rightHandActions?: React.ReactNode;
}
const ActionsBar: React.FC<Props> = ({
  leftHandActions,
  rightHandActions,
  children,
  ...restProps
}) => (
  <Box py={2} {...restProps}>
    <Flex justifyContent="space-between" px={2}>
      <FlexGroupHack flex={2} alignItems="center">
        {leftHandActions}
      </FlexGroupHack>
      {rightHandActions && (
        <Flex flex={1} justifyContent="flex-end">
          {rightHandActions}
        </Flex>
      )}
    </Flex>
    {children}
  </Box>
);

export { ActionsBar };