import React from 'react';
import { ContactBubble } from '@nova-hf/ui';
import UI from 'beta/store/ui';
import { inject, observer } from 'mobx-react';
import { useContactBubbleConfigQuery } from 'typings/graphql';

import '@nova-hf/ui/node_modules/react-datepicker/dist/react-datepicker.css';

interface IContactBubbleWrapperProps {
  ui?: UI;
}

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

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

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

export default inject('ui')(observer(ContactBubbleWrapper));