// Libs
// -----------------------------------------------------------------------------
import { FC, Fragment } from 'react';
import {
  AreaChartOutlined,
  BellOutlined,
  UserOutlined,
} from '@ant-design/icons';
import { Button, Dropdown, Popover } from 'antd';
import Icon from '@ant-design/icons';
import { observer } from 'mobx-react-lite';

// App
// -----------------------------------------------------------------------------
import { FONT_SIZE_LARGE_ICON } from 'components/constants';
import { HEADER, useTranslation } from 'core/i18n';
import { ReactComponent as LanguageUS } from 'assets/images/Svg/languageUS.svg';
import { ReactComponent as LanguageRU } from 'assets/images/Svg/languageRU.svg';
import MainMenu from 'components/Layout/components/Header/MainMenu';
import SecondaryMenu from './SecondaryMenu/SecondaryMenu';
import LanguageMenu from './LanguageMenu/LanguageMenu';
import './Header.scss';
import { RootStore } from 'stores/RootStore';
import { useStore } from 'stores/StoreProvider';

const Header: FC = observer(() => {
  const { t, i18n } = useTranslation([HEADER]);
  const rootStore: RootStore = useStore();

  // Навигацию отображать только при активированной лицензии.
  // Иначе перенаправлять на страницу активации, там навигация не нужна,
  // только смена языка.
  const showNavigation = rootStore.licenseStore.isActivated === true;

  return (
    <div className="header flex" style={{ alignItems: 'center' }}>
      {/* TODO: раскомментировать после релиза */}
      {/*<Button type="link" className="flex-aijc" href="/">*/}
      {/*  <div data-test="header_logo" className="logo" />*/}
      {/*</Button>*/}

      {/* TODO: убрать после релиза */}
      <div className="flex-aijc">
        <div data-test="header_logo" className="logo" />
      </div>

      {showNavigation && (
        <div className="header__menu">
          <MainMenu />
        </div>
      )}

      <div className="flex-aijc header__icons">
        {showNavigation && (
          <Fragment>
            {/* TODO: раскомментировать после релиза */}
            {/*<Popover content={t('header:app.header.dash_board')}>*/}
            {/*  <Button type="link">*/}
            {/*    <AreaChartOutlined*/}
            {/*      data-test="header_dashboard_icon"*/}
            {/*      className="header__icons__icon"*/}
            {/*    />*/}
            {/*  </Button>*/}
            {/*</Popover>*/}

            {/* TODO: раскомментировать после релиза */}
            {/*<Popover content={t('header:app.header.notification')}>*/}
            {/*  <Button type="link">*/}
            {/*    <BellOutlined*/}
            {/*      data-test="header_notification_icon"*/}
            {/*      className="header__icons__icon"*/}
            {/*    />*/}
            {/*  </Button>*/}
            {/*</Popover>*/}

            <Dropdown overlay={<SecondaryMenu t={t} />} placement="bottom">
              <Button type="link">
                <UserOutlined
                  data-test="header_profile_icon"
                  className="header__icons__icon"
                />
              </Button>
            </Dropdown>

            <Button>
              {/*<NavLink to={'accounts/login'}>Авторизоватся</NavLink>*/}
            </Button>
          </Fragment>
        )}

        {/* TODO: раскомментировать после релиза */}
        {/*<Dropdown overlay={<LanguageMenu i18n={i18n} />} placement="bottom">*/}
        {/*  <span*/}
        {/*    className="ant-dropdown-link"*/}
        {/*    onClick={(e) => e.preventDefault()}*/}
        {/*  >*/}
        {/*    <Icon*/}
        {/*      style={{ fontSize: FONT_SIZE_LARGE_ICON }}*/}
        {/*      component={i18n.language === 'en' ? LanguageUS : LanguageRU}*/}
        {/*    />*/}
        {/*  </span>*/}
        {/*</Dropdown>*/}
      </div>
    </div>
  );
});

export default Header;
