import { PropsWithChildren, useState } from 'react';
import { useLaunch } from '@tarojs/taro';
import { IntlProvider } from 'react-intl';
import { ConfigProvider, Button } from 'antd';
import './app.css';
import { lightTheme, darkTheme } from './themes';

const locale = (window.navigator.language || 'en').toLowerCase().split('-')[0]; // Get locale from browser or default to 'en'
import messages_en from './assets/i18n/messages/en';
import messages_zh from './assets/i18n/messages/zh';

const messages = locale === 'zh' ? messages_zh : messages_en;

function App({ children }: PropsWithChildren<React.ReactNode>) {
  useLaunch(() => {
    console.log('App launched.');
  });

  const [currentTheme, setCurrentTheme] = useState(lightTheme); // 默认使用 light 主题
  const changeTheme = (themeConfig: typeof lightTheme) => {
    setCurrentTheme(themeConfig);
  };

  // children 是将要会渲染的页面
  // return children
  return (
    <ConfigProvider theme={currentTheme}>
      <IntlProvider locale={locale} messages={messages}>
        <div
          style={{
            backgroundColor: currentTheme.token.colorBgLayout,
            color: currentTheme.token.colorText,
            borderRadius: '8px',
            boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
          }}
        >
          {children}
          <div className="fixed bottom-4 right-4">
            <Button type="primary" onClick={() => changeTheme(darkTheme)}>
              Switch to Dark Theme
            </Button>
            <Button type="primary" onClick={() => changeTheme(lightTheme)}>
              Switch to Light Theme
            </Button>
          </div>
        </div>
      </IntlProvider>
    </ConfigProvider>
  );
}

export default App;