import css from './index.module.css';
import {FC} from 'react';
import TabItem from './item';
import {ShowContextMenuParams} from 'react-contexify';
import {useScrollToView} from './hooks';
import {useStore} from 'zustand';
import {tabStore} from '@stores';

type MakeOptional<Type, Key extends keyof Type> = Omit<Type, Key> &
  Partial<Pick<Type, Key>>;

type Props = {
  onTabItemContentMenu: (
    params: MakeOptional<ShowContextMenuParams<unknown>, 'id'>,
  ) => void;
};

const Tabs: FC<Props> = function ({onTabItemContentMenu}) {
  const tabs = useStore(tabStore, state => state.tabList);
  useScrollToView();

  return (
    <ul className={css.tabList} id='p_tab_list'>
      {tabs.map(function ({key, label}) {
        return (
          <TabItem
            key={key}
            label={label}
            id={key}
            onContentMenu={onTabItemContentMenu}
          />
        );
      })}

      {/* <i className={css.tabIndicator} style={style} /> */}
    </ul>
  );
};

export default Tabs;
