import React, { useEffect } from 'react';
import { useQuery } from '@apollo/client';
import { Hero, HeroHeadline, HeroTitle, Subtitle } from '@nova-hf/ui';
import SVGAddService from 'assets/svg/addService.svg';
import AddServiceMenu from 'components/add-service-menu/AddServiceMenu';
import { HeroDock } from 'components/hero-dock/HeroDock';
import { HeroDockItem } from 'components/hero-dock/HeroDockItem';
import SideMenuContainer from 'components/side-menu/SideMenuContainer';
import { ME } from 'graphql/queries/me';
import { inject } from 'mobx-react';
import Authentication from 'store/authentication';
import UI from 'store/ui';
import { IUserData } from 'typings';
import { formatName } from 'utils/helpers';
import { useTranslation } from 'utils/i18n';

interface IHeroProps {
  title: string;
  color?: string;
  background?: string;
  authentication: Authentication;
  ui: UI;
}

const HeroContainer = ({ title, background = 'light', color, authentication, ui }: IHeroProps) => {
  const {
    accountInput: { ssn },
  } = authentication;

  useEffect(() => {
    if (ui) {
      ui.setHasSideMenu(true);
      ui.setHasCustomerMenu(false);
      ui.setHeaderStyle('dark');
    }
  }, []);

  const textColor = background === 'dark' ? 'white' : 'dark';
  const heroBackground = background === 'dark' ? 'dark' : 'white';
  const { error, data } = useQuery<IUserData>(ME, {
    variables: { accountInput: { ssn } },
  });
  const { t } = useTranslation('common');
  const [isAddMenuOpen, setAddMenuOpen] = React.useState(false);

  if (error || !data?.me) {
    return null;
  }

  const { me } = data;

  return (
    <div>
      <Hero
        accentColor={color}
        subHero
        leftAlign
        background={heroBackground}
        color={textColor}
        withDock
        lessPadding={ui.announcementBannerHeight === 0}
      >
        <HeroHeadline withSubtitle>
          <Subtitle col={12} color={textColor} leftAlign>
            {`${t('hello')} ${formatName(me)}`}
          </Subtitle>
          <HeroTitle subHero color={textColor}>
            {title}
          </HeroTitle>
        </HeroHeadline>
      </Hero>
      <HeroDock>
        <div
          style={{
            display: 'flex',
            width: '100%',
            justifyContent: 'flex-end',
            position: 'relative',
          }}
        >
          <HeroDockItem
            title={t('addPlan')}
            onClick={() => setAddMenuOpen(true)}
            icon={<SVGAddService />}
          >
            {isAddMenuOpen && (
              <AddServiceMenu
                isVisible={isAddMenuOpen}
                onOutsideClick={() => setAddMenuOpen(false)}
                onClick={() => setAddMenuOpen(false)}
              />
            )}
          </HeroDockItem>
        </div>
      </HeroDock>
      <SideMenuContainer />
    </div>
  );
};

export default inject('authentication', 'ui')(HeroContainer);