import {Dropdown} from 'antd';
import {forwardRef, memo} from 'react'
import {SkinFilled,AudioFilled,SunFilled,MoonFilled} from '@ant-design/icons';
import {useAppDispatch} from '../../redux/configureStore.js';
import themeSlice from '../../styles/theme/slice';
import {changeLang} from '../../locales/i18n.js';
import useI18NPrefix from '../hooks/useI18NPrefix.js';


const component = forwardRef(({children},ref)=>{
  const dispatch = useAppDispatch();
  const t = useI18NPrefix('global');
  const items = [
    {
      key: 'theme',
      label: t('theme.self'),
      icon:<SkinFilled />,
      children: [
        {
          key: 'light',
          icon:<SunFilled style={{color:'#faad14'}}/>,
          label: t('theme.light'),
        },
        {
          key: 'dark',
          icon:<MoonFilled style={{color:'dark'}}/>,
          label: t('theme.dark'),
        },
      ],
    },
    {
      key: 'language',
      label: t('lang.self'),
      icon: <AudioFilled />,
      children: [
        {
          key: 'zh',
          label: t('lang.zh'),
        },
        {
          key: 'en',
          label: t('lang.en'),
        },
      ],
    }
  ];
  const onSelect = (event)=>{
    const {keyPath,key} = event;
    const isTheme = keyPath.includes('theme');
    const isLang = keyPath.includes('language');
    if (isTheme){
      dispatch(themeSlice.actions.changeTheme(key));
    }
    if (isLang){
      changeLang(key);
    }
  }

  return (
    <Dropdown
      placement="rightBottom"
      arrow={false}
      trigger='click'
      menu={{
        items,
        expandIcon: false,
        triggerSubMenuAction:'click',
        onClick:onSelect
      }}
    >
      <div ref={ref}>
        {children}
      </div>
    </Dropdown>
  )
})
export const SettingPanel = memo(component)

