import React, { Fragment, FC, ReactType } from 'react';
import { Tabs, TabList, Tab, TabPanel } from '../../components/Tab';

import css from './index.module.css';

export interface PackageListTabsCategories {
  [key: string]: {
    name: string;
    slug: string;
    items: unknown;
  };
}

export interface PackageListTabsProps {
  title: string;
  emptyMessage?: string;
  items: [];
  tabListItems?: {
    slug: string;
    name: string;
  }[];
  PackageList?: ReactType;
  packageListItems?: {
    title: string;
    items: [];
  }[];
  pagination: {
    showMoreText: string;
    isLoading: boolean;
    hasAllItemsLoaded: boolean;
    setPagination: () => void;
    setIsLoading: () => void;
  };
  updatePackageItems: () => void;
  onTabChange: (index, lastIndex) => void;
  selectedIndex?: number;
}

const PackageListTabs: FC<PackageListTabsProps> = ({
  title = '',
  emptyMessage,
  tabListItems,
  PackageList,
  packageListItems,
  updatePackageItems,
  pagination,
  onTabChange,
  selectedIndex,
}) => {
  return (
    <Fragment>
      <Tabs
        onSelect={(index, lastIndex): void => onTabChange(index, lastIndex)}
        className={css.packageListTabs__tabs}
        selectedIndex={selectedIndex}
        /* MILA-1702 Enable forceRender so that packages can get indexed for SEO */
        forceRenderTabPanel={true}
      >
        <div className={css.packageListTabs__tabList}>
          <div className={css.packageListTabs__title}>{title}</div>
          <TabList>
            {tabListItems &&
              tabListItems.map(category => (
                <Tab tabIndex="0" key={category.slug}>
                  {category.name}
                </Tab>
              ))}
          </TabList>
        </div>
        {PackageList &&
          packageListItems &&
          packageListItems.map(category => (
            <div key={category.title} className={css.packageListTabs__tabPanel}>
              <TabPanel>
                <PackageList
                  isLoading
                  items={category.items}
                  emptyMessage={emptyMessage}
                  updatePackageItems={updatePackageItems}
                  pagination={pagination}
                  isSelected={
                    category.title === tabListItems[selectedIndex].slug
                  }
                />
              </TabPanel>
            </div>
          ))}
      </Tabs>
    </Fragment>
  );
};

export default PackageListTabs;