// eslint-disable-next-line @typescript-eslint/no-unused-vars
import React, { useCallback } from 'react';
// import ColumnMenu from './ColumnMenu';
// import ColumnSub from './ColumnSub';
// import ItemGroup from './ItemGroup';
// import Label from './Label';
// import MenuItem from './MenuItem';
// import styled from 'styled-components';
// import Menu from '../lib/Menu/Menu ';
// import MenuItem from '../lib/Menu/MenuItem';
// import SubMenu from '../lib/Menu/SubMenu';
// import ItemGroup from '../lib/Menu/ItemGroup';
// import QQ from '../static/icons/qq.svg';
// import Label from '../lib/Menu/Label';
// import ColumnSub from '../lib/Menu/ColumnSub';
// import ColumnMenu from '../lib/Menu/ColunmMenu';
//
// const Wrap = styled.div`
//   position: relative;
//   display: flex;
//   flex-direction: column;
//   border: 2px solid yellow;
// `;
//
// const Home: React.FC = () => {
//   const callback = useCallback((key: number) => {
//     console.log(key);
//   }, []);
//   return (
//     <Wrap>
//       <Menu callback={callback} justify="center">
//         <SubMenu>
//           <Label>
//             <QQ fill="red" width="1.1em" height="1.1em" />
//             <span>导航一</span>
//           </Label>
//         </SubMenu>
//         <SubMenu>
//           <Label>导航二</Label>
//           <ItemGroup>
//             <Label>标签1</Label>
//             <MenuItem order={3}>鼠标离开</MenuItem>
//             <MenuItem order={4}>反若是通</MenuItem>
//             <ItemGroup>
//               <Label>标签2</Label>
//               <MenuItem order={5}>元素套一</MenuItem>
//               <MenuItem order={6}>父级，那么</MenuItem>
//               <MenuItem order={7}>学习总结，</MenuItem>
//             </ItemGroup>
//           </ItemGroup>
//           <ItemGroup>
//             <Label>标签3</Label>
//             <MenuItem order={11}>反若是通</MenuItem>
//             <MenuItem order={12}>和选中了。</MenuItem>
//             <MenuItem order={13}>这两个兄弟</MenuItem>
//           </ItemGroup>
//         </SubMenu>
//         <SubMenu>
//           <Label>导航三</Label>
//           <MenuItem order={4}>xxx</MenuItem>
//           <MenuItem order={5}>xxx</MenuItem>
//           <MenuItem order={6}>xxx</MenuItem>
//           <ItemGroup>
//             <Label>标签1</Label>
//             <MenuItem order={7}>xxx</MenuItem>
//             <MenuItem order={8}>xxx</MenuItem>
//             <ItemGroup>
//               <Label>标签1</Label>
//               <MenuItem order={3}>鼠标离开</MenuItem>
//               <MenuItem order={4}>反若是通</MenuItem>
//               <ItemGroup>
//                 <Label>标签2</Label>
//                 <MenuItem order={5}>元素套一</MenuItem>
//                 <MenuItem order={6}>父级，那么</MenuItem>
//                 <MenuItem order={7}>学习总结，</MenuItem>
//               </ItemGroup>
//             </ItemGroup>
//             <ItemGroup>
//               <Label>标签3</Label>
//               <MenuItem order={11}>反若是通</MenuItem>
//               <MenuItem order={12}>和选中了。</MenuItem>
//               <MenuItem order={13}>这两个兄弟</MenuItem>
//             </ItemGroup>
//           </ItemGroup>
//         </SubMenu>
//       </Menu>
//       <ColumnMenu callback={callback}>
//         <ColumnSub>
//           <MenuItem order={1}>通过兄弟</MenuItem>
//           <MenuItem order={2}>要其中任意一</MenuItem>
//           <ItemGroup>
//             <Label>
//               标签1 <QQ fill="red" width="1.1em" height="1.1em" />
//             </Label>
//             <MenuItem order={3}>
//               鼠标离开
//               <QQ fill="red" width="1.1em" height="1.1em" />
//             </MenuItem>
//             <MenuItem order={4}>反若是通</MenuItem>
//             <ItemGroup>
//               <Label>标签2</Label>
//               <MenuItem order={5}>元素套一</MenuItem>
//               <MenuItem order={6}>父级，那么</MenuItem>
//               <MenuItem order={7}>学习总结，</MenuItem>
//             </ItemGroup>
//           </ItemGroup>
//           <ItemGroup>
//             <Label>标签3</Label>
//             <MenuItem order={11}>反若是通</MenuItem>
//             <MenuItem order={12}>和选中了。</MenuItem>
//             <MenuItem order={13}>这两个兄弟</MenuItem>
//           </ItemGroup>
//         </ColumnSub>
//       </ColumnMenu>
// <Wrap>
//   <ColumnMenu
//     defaultOrder={order}
//     setOrder={setOrder}
//     style={{ width: '150px', height: '500px' }}
//   >
//     <ColumnSub>
//       <ItemGroup>
//         <Label>标签1</Label>
//         <MenuItem order={1}>鼠标离开</MenuItem>
//         <MenuItem order={2}>反若是通</MenuItem>
//         <ItemGroup>
//           <Label>标签2</Label>
//           <MenuItem order={5}>元素套一</MenuItem>
//           <MenuItem order={6}>父级，那么</MenuItem>
//           <MenuItem order={7}>学习总结，</MenuItem>
//         </ItemGroup>
//       </ItemGroup>
//       <ItemGroup>
//         <Label>标签3</Label>
//         <MenuItem order={11}>反若是通</MenuItem>
//         <MenuItem order={12}>和选中了。</MenuItem>
//         <MenuItem order={13}>这两个兄弟</MenuItem>
//       </ItemGroup>
//     </ColumnSub>
//   </ColumnMenu>
// </Wrap>
//     </Wrap>
//   );
// };
//
// export default Home;