import { Box, IconButton } from '@mui/material';
import {
  LightModeOutlined as LightModeOutlinedIcon,
  Brightness2Outlined as Brightness2OutlinedIcon,
} from '@mui/icons-material';

import Basic from './demo/basic';
import Durable from './demo/durable';
import Stripped from './demo/stripped';
import LocaleZh from './demo/locale-zh';
import ElementTitle from './demo/element-title';
import CustomButtons from './demo/custom-buttons';
import ColumnWidth from './demo/column-width';
import SelectItem from './demo/select-item';
import SetTableBodyHeight from './demo/set-table-body-height';
import HideTableHeader from './demo/hide-table-header';
import ParentContainerHasHeight from './demo/parent-container-has-height';
import InFlexHeight from './demo/in-flex-height';
import EmptyTable from './demo/empty-table';
import VerticalKeyWidth from './demo/vertical-key-width';
import CustomCellRender from './demo/custom-cell-render';
import SearchOpenAndPlaceholder from './demo/search-open-and-placeholder';
import DynamicData from './demo/dynamic-data';
import LotsOfData from './demo/lots-of-data';
import JumpToPage from './demo/jump-to-page';
import { ThemeProvider, useColorScheme } from '../Theme';

export default {
  title: 'Data Display/Datatable',

  parameters: {
    docs: {
      description: {
        component: 'Enhanced Datatable component, based on mui-datatables',
      },
    },
  },
  decorators: [
    (StoryFn) => (
      <ThemeProvider prefer="system">
        <Container>
          <StoryFn />
        </Container>
      </ThemeProvider>
    ),
  ],
};

export {
  Basic,
  Durable,
  Stripped,
  LocaleZh,
  ElementTitle,
  CustomButtons,
  ColumnWidth,
  SelectItem,
  SetTableBodyHeight,
  HideTableHeader,
  ParentContainerHasHeight,
  InFlexHeight,
  EmptyTable,
  VerticalKeyWidth,
  CustomCellRender,
  SearchOpenAndPlaceholder,
  DynamicData,
  LotsOfData,
  JumpToPage,
};

VerticalKeyWidth.parameters = {
  viewport: {
    defaultViewport: 'tablet',
  },
};

// eslint-disable-next-line react/prop-types
function Container({ children }) {
  const { mode, toggleMode } = useColorScheme();

  return (
    <Box sx={{ p: 4, backgroundColor: 'background.default', color: 'text.primary' }}>
      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>
        {/* 切换浅色/深色模式 */}
        <IconButton onClick={toggleMode} color="inherit" sx={{ border: 1, borderColor: 'divider' }}>
          {mode === 'light' ? <Brightness2OutlinedIcon /> : <LightModeOutlinedIcon />}
        </IconButton>
      </Box>
      {children}
    </Box>
  );
}
