import { getClassNames } from '@websolutespa/bom-core';
import { forwardRef, useContext } from 'react';
import styled from 'styled-components';
import { getCssResponsive, UIStyledComponentProps } from '../../components';
import { getVariantKey } from '../../variants';
import { ComboboxContext } from './combobox.context';
import { comboboxVariants, IComboboxVariants } from './combobox.variants';

const ComboboxEmptyStyle = styled.div<ComboboxEmptyProps>`
  ${props => getVariantKey('empty', props.variant, props.variants)}
  ${props => getCssResponsive(props)}
`;

export type ComboboxEmptyProps = UIStyledComponentProps<{
  variant?: keyof typeof comboboxVariants | (string & {});
  variants?: IComboboxVariants;
}>;

export const ComboboxEmpty = forwardRef<HTMLDivElement, ComboboxEmptyProps>(
  function ComboboxEmpty({
    variant,
    variants,
    className,
    children,
    ...props
  }: ComboboxEmptyProps, ref) {
    const context = useContext(ComboboxContext);
    if (!context) {
      return;
    }
    const classNames = getClassNames('combobox__empty', className);
    return (
      <ComboboxEmptyStyle
        ref={ref}
        className={classNames}
        variant={variant || context.variant}
        variants={variants || context.variants}
        {...props}
      >{children || 'No results found'}</ComboboxEmptyStyle>
    );
  });