import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useRouter } from 'next/router';

import { FORMAT_FILTERS, FORMAT_FILTERS_SELF_SERVE, TABS, TABS_SELF_SERVE } from '../constants';
import { PCN_GET_MARKETPLACE_DASHBOARD } from '@/modules/@common/acl/constants';

import * as selectors from '../../dashboard/redux/selectors';
import * as actions from '../../dashboard/redux/slices';
import { hasPermission } from '@/modules/@common/user/helpers';
import { getUserPermissionsSelector } from '@/modules/@common/user/redux/selectors';

import Search from '../../dashboard/components/SearchNew';
import { Stack, Tab, Tabs, ToggleButton, ToggleButtonGroup } from '@/mui/components';

import styles from './Header.module.scss';

function Header() {
  const dispatch = useDispatch();

  const userPermissions = useSelector(getUserPermissionsSelector);

  const searchResult = useSelector(selectors.searchResultSelector);
  const isSearchLoading = useSelector(selectors.isSearchLoadingSelector);
  const formatFilterId = useSelector(selectors.formatFilterIdSelector);

  const setSearch = (o) => dispatch(actions.setSearchAction(o));

  const isAdminMP = hasPermission(PCN_GET_MARKETPLACE_DASHBOARD, userPermissions);

  const router = useRouter();

  const defineValue = () => {
    if (router.pathname.startsWith('/supply')) {
      return isAdminMP ? 1 : 0;
    }

    if (router.pathname.startsWith('/demand')) {
      return isAdminMP ? 2 : 1;
    }

    if (router.pathname.startsWith('/key-lists')) {
      return isAdminMP ? 3 : 2;
    }

    return 0;
  };

  const tabIndex = defineValue();

  const isNotSpecificTagPage = !router.query?.params?.includes('tags');

  const tabs = isAdminMP ? TABS : TABS_SELF_SERVE;
  const formatFilters = isAdminMP ? FORMAT_FILTERS : FORMAT_FILTERS_SELF_SERVE;

  useEffect(() => {
    if (!isAdminMP) {
      dispatch(actions.getHubsAndDemandAccountsAction());
    }
  }, []);

  return (
    <Stack className={styles.Header} direction="row" container alignItems="center" justifyContent="space-between">
      <Tabs equalWidth size="medium" className={styles.Tabs} value={tabIndex}>
        {tabs.map((tab) => (
          <Tab
            key={tab.label}
            label={tab.label}
            onClick={() => {
              router.push(tab.link);
            }}
          />
        ))}
      </Tabs>

      <div className={styles.Filters}>
        {TABS[tabIndex]?.showFormatFilter && isNotSpecificTagPage && (
          <div className={styles.ButtonGroup}>
            <ToggleButtonGroup equalWidth size="small" color="primary" variant="outlined" value={formatFilterId}>
              {formatFilters.map((filter) => (
                <ToggleButton
                  key={filter.label}
                  value={filter.id}
                  onClick={() => {
                    let formatFilter = null;

                    if (filter.format && filter.accountType) {
                      formatFilter = {
                        format: filter.format,
                        accountType: filter.accountType,
                      };
                    }

                    dispatch(
                      actions.setFilterFormatAction({
                        formatFilterId: filter.id,
                        formatFilter,
                      }),
                    );
                  }}
                >
                  {filter.label}
                </ToggleButton>
              ))}
            </ToggleButtonGroup>
          </div>
        )}
        <Search
          isLoading={isSearchLoading}
          searchResult={searchResult}
          setSearchAction={setSearch}
          isAdminMP={isAdminMP}
        />
      </div>
    </Stack>
  );
}

export default Header;
