import * as React from 'react';
import { Col, Button, Row, ConfigProvider, message } from '@btri-ui/base';

const Base = () => {
  const changeTheme = (theme: string) => {
    ConfigProvider.switchTheme({
      theme,
      success: () => {
        message.success(`切换主题成功，当前主题为${theme}`);
      },
    });
  };
  React.useEffect(() => {
    const observer = ConfigProvider.onThemeChange((theme, name) => {
      console.log(theme, name);
    });
    return () => {
      observer.disconnect();
    };
  }, []);

  return (
    <>
      <Row autoMode={true}>
        <Col span={6}>
          <Button
            type="default"
            onClick={() => {
              changeTheme('light');
            }}
          >
            白天主题
          </Button>
        </Col>
        <Col span={6}>
          <Button
            type="default"
            onClick={() => {
              changeTheme('dark');
            }}
          >
            黑夜主题
          </Button>
        </Col>
      </Row>
    </>
  );
};

export default Base;