import React, { useEffect, useState } from 'react';

import { DEMAND_ACCOUNTS_PAGE_CONFIG, SUPPLY_ACCOUNTS_PAGE_CONFIG } from '../constants';

import NameCell from '../../account/components/Cells/NameCell';
import TargetingCell from '../../account/components/Cells/TargetingCell';

function usePageConfig(router) {
  const definePage = (pathname) => {
    if (pathname === SUPPLY_ACCOUNTS_PAGE_CONFIG.pathname) {
      return {
        ...SUPPLY_ACCOUNTS_PAGE_CONFIG,
        cellRenderer: {
          name: (props) => <NameCell {...props} />,
        },
      };
    }
    if (pathname === DEMAND_ACCOUNTS_PAGE_CONFIG.pathname) {
      return {
        ...DEMAND_ACCOUNTS_PAGE_CONFIG,
        cellRenderer: {
          name: (props) => <NameCell {...props} />,
          [[
            'include',
            'exclude',
            'frequency',
            'advertiserInclude',
            'advertiserExclude',
            'waterfallSkip',
            'viewabilityThreshold',
            'kvTargeting',
          ]]: (props) => <TargetingCell {...props} />,
        },
      };
    }

    return null;
  };

  const [result, setResult] = useState(definePage(router.pathname));

  useEffect(() => {
    setResult(definePage(router.pathname));
  }, [router.pathname]);

  return result;
}

export default usePageConfig;
