import { useQuery } from '@apollo/client';
import { inject, observer } from 'mobx-react';
import { CONTACTBUBBLE_CONFIG } from 'graphql/queries/contactBubbleConfig';
import { ContactBubble } from '@nova-hf/ui';

/**
 * Importing react-datepicker.css for the react-datepicker used by ContactBubble in ui.
 * This is a temporary fix while importing this css in MakeAnAppointment component in ui causes errors when used in portal.
 */
import '@nova-hf/ui/node_modules/react-datepicker/dist/react-datepicker.css';

interface IContactBubbleWrapperProps {
  ui?: {
    showContactBubble: boolean;
    isContactMenuOpen: boolean;
    isStickyBar: boolean;
    setIsContactMenuOpen: (value: boolean) => {};
  };
}

const ContactBubbleWrapper = inject('ui')(observer((props: IContactBubbleWrapperProps) => {
  const { ui } = props;
  const { data } = useQuery(CONTACTBUBBLE_CONFIG);

  if (ui?.showContactBubble === false) {
    return null;
  }

  return (
    <ContactBubble
      openContactMenu={ui?.isContactMenuOpen}
      isStickyBar={ui?.isStickyBar}
      onCloseMenu={() => {
        ui?.setIsContactMenuOpen(false);
      }}
      config={data?.contactBubbleConfig}
    />
  );
}));

export default ContactBubbleWrapper;