import css from './index.module.css';
import {FC} from 'react';
import {useContextSection} from '@hooks';
import {context} from '../../context';
import TabItem from './item';
import {ShowContextMenuParams} from 'react-contexify';
import {useIndicator} from './hooks';

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 = useContextSection(context, state => state[0]);
  const style = useIndicator();

  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;
