import '@/global.less';
import '@/overrides.less';
import themes from '@/styles/theme.less';
import type { Preview } from '@storybook/react';
import { App, ConfigProvider } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import { initialize, mswLoader } from 'msw-storybook-addon';
import { createWebSocketMock } from './mock/websocket.mock';
import './storybook.css';

/*
 * Initializes MSW
 * See https://github.com/mswjs/msw-storybook-addon#configuring-msw
 * to learn how to customize it
 */
initialize();

// 替换全局 WebSocket 为 Mock 版本
// @ts-ignore
global.WebSocket = createWebSocketMock();

const preview: Preview = {
  parameters: {
    controls: {
      expanded: true,
      sort: 'requiredFirst',
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
    backgrounds: {
      values: [
        { name: 'Dark', value: '#000' },
        { name: 'Gray', value: '#f9fafb' },
        { name: 'Light', value: '#FFF' },
      ],
      default: 'Light',
    },
    options: {
      storySort: {
        method: 'alphabetical',
        order: ['Documentation', 'Components'],
      },
    },
  },
  decorators: [
    (Story) => (
      <ConfigProvider
        locale={zhCN}
        theme={{
          cssVar: true,
          token: {
            colorPrimary: themes['primaryColor'],
            colorSuccess: themes['successColor'],
            colorError: themes['errorColor'],
            colorWarning: themes['warningColor'],
            colorLink: themes['primaryColor'],
            colorText: themes['textColor'],
            controlHeightLG: 46,
          },
          components: {
            Button: {
              defaultBg: 'rgba(22, 100, 255, 0.06)',
              defaultBorderColor: 'rgba(22, 100, 255, 0.11)',
              defaultColor: themes['textColor'],
              defaultHoverBg: 'rgba(22, 100, 255, 0.06)',
              defaultHoverBorderColor: 'rgba(22, 100, 255, 0.5)',
              defaultHoverColor: '#3F7FFF ',
              defaultActiveBg: 'rgba(22, 100, 255, 0.12)',
              defaultActiveBorderColor: 'rgba(22, 100, 255, 0.75)',
              defaultActiveColor: themes['primaryColor'],
              contentFontSize: parseInt(themes['fontSize']),
            },
            Input: {
              inputFontSize: parseInt(themes['fontSizeInput']),
              inputFontSizeLG: parseInt(themes['fontSizeInputLg']),
              paddingBlockLG: 10,
            },
            Select: {
              singleItemHeightLG: 46,
              optionSelectedColor: themes['primaryColor'],
            },
            Table: {
              headerBg: 'rgba(242, 244, 247, 0.36)',
              headerBorderRadius: 4,
              rowSelectedBg: 'rgba(22, 100, 255, 0.05)',
            },
            Tabs: {
              titleFontSize: 16,
            },
            Form: {
              labelColor: 'rgba(29, 29, 32, 0.8);',
            },
            Breadcrumb: {
              iconFontSize: parseInt(themes['fontSize']),
              linkColor: 'rgba(29, 29, 32, 0.7)',
              separatorColor: 'rgba(29, 29, 32, 0.7)',
            },
          },
        }}
      >
        <App message={{ maxCount: 3 }}>
          <Story />
        </App>
      </ConfigProvider>
    ),
  ],
  loaders: [mswLoader], // 👈 Add the MSW loader to all stories
};

export default preview;
