import {Layout} from 'antd';
import {FC} from 'react';
import {useMenu, useTabItems} from './hooks';
import {Menu, Item} from 'react-contexify';
import {
  DndContext,
  useSensor,
  PointerSensor,
  closestCenter,
} from '@dnd-kit/core';
import {
  restrictToFirstScrollableAncestor,
  restrictToHorizontalAxis,
} from '@dnd-kit/modifiers';
import {
  SortableContext,
  horizontalListSortingStrategy,
} from '@dnd-kit/sortable';
import Tabs from './tab';
import TabPanel from './tab-panel';

const Main: FC = function () {
  const [tabs, onDragEnd] = useTabItems();
  const {show, onMenuitemClick} = useMenu();
  const sensor = useSensor(PointerSensor, {
    activationConstraint: {distance: 10},
  });

  return (
    <>
      <DndContext
        modifiers={[
          restrictToFirstScrollableAncestor,
          restrictToHorizontalAxis,
        ]}
        collisionDetection={closestCenter}
        onDragEnd={onDragEnd}
        sensors={[sensor]}
        autoScroll
      >
        <SortableContext
          items={tabs.map(val => val.key)}
          strategy={horizontalListSortingStrategy}
        >
          <Layout.Content className='layout-content-custom'>
            <Tabs onTabItemContentMenu={show} />
            <TabPanel />
          </Layout.Content>
        </SortableContext>
      </DndContext>

      <Menu id='content_menu' style={{zIndex: '999999'}}>
        <Item id='remove' data-testid='remove' onClick={onMenuitemClick}>
          关闭
        </Item>
        <Item id='clear' data-testid='clear' onClick={onMenuitemClick}>
          关闭所有
        </Item>
        <Item
          id='remove_right'
          data-testid='remove_right'
          onClick={onMenuitemClick}
        >
          关闭右侧标签
        </Item>
        <Item
          id='remove_other'
          data-testid='remove_other'
          onClick={onMenuitemClick}
        >
          关闭其他标签
        </Item>
      </Menu>
    </>
  );
};

export default Main;
