import React, { useState } from 'react';
import { Drawer } from 'antd-mobile';
import NavBarDiy from '../../baseComponents/NavBarDiy';
import FilterMenu from '../../baseComponents/FilterMenu';
import FilterIcon from './FilterIcon';

const DrawerWithFIlter = ({ navBar: {rightContent, ...navBarRest}, drawer, children, filterMenu }) => {
  const [sidebarVisible, toggleSidebar] = useState(false);
  const navBarRight = [<FilterIcon key="0" style={{marginLeft: '0.3rem'}} onClick={() => toggleSidebar(v => !v)} />];

  function getRightContent(content) {
    if (!content) return navBarRight;
    if (typeof content === 'function') {
      return content(navBarRight);
    }
    if (Array.isArray(content)) {
      return [...content, ...navBarRight];
    }
  }
  return (
    <>
      <NavBarDiy
        title="首页"
        rightContent={getRightContent(rightContent)}
        {...navBarRest}
      />
      <Drawer
        style={{ top: 44 }}
        position="right"
        sidebar={<FilterMenu onClose={() => toggleSidebar(v => !v)} {...filterMenu} />}
        open={sidebarVisible}
        onOpenChange={() => toggleSidebar(v => !v)}
        {...drawer}
      >
        {children}
      </Drawer>
    </>
  );
};

export default DrawerWithFIlter;
