import {Dropdown} from 'antd';
import {forwardRef, memo} from 'react'
import {SettingFilled} from '@ant-design/icons';
import {useAppDispatch} from '../../redux/configureStore.js';
import themeSlice from '../../styles/theme/slice';
import useI18NPrefix from '../hooks/useI18NPrefix.js';


const component = forwardRef(({children},ref)=>{
  const dispatch = useAppDispatch();
  const t = useI18NPrefix('global');
  const items = [
    {
      key: 'setting',
      label: t('title.setting'),
      icon:<SettingFilled />
    }
  ];
  const onSelect = (event)=>{
    const {keyPath} = event;
    const setting = keyPath.includes('setting');
    if (setting){
      dispatch(themeSlice.actions.openThemeDesigner(true));
    }
  }

  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)

