import React from 'react'
import { PageContainer, PageContainerProps } from '@ant-design/pro-components'
import { Flexbox } from 'react-layout-kit'
import { DraggablePanel, DraggablePanelProps } from '@/components/draggable-panel'
import { useStyle } from './style'
import { useAtom } from 'jotai/index'
import { currentMenuAtom } from '@/store/system.ts'
import useResizeObserver from '@/hooks/useResizeObserver.ts'
import useInlineStyle from '@/hooks/useInlineStyle.ts'
import { useNavigate } from '@tanstack/react-router'
import { Space } from 'antd'
import { ArrowLeftOutlined } from '@ant-design/icons'

interface ITreePageLayoutProps {
  children?: React.ReactNode
  draggableProps?: DraggablePanelProps
  pageProps?: PageContainerProps
  leftPanel?: React.ReactNode
  className?: string
}

export const TwoColPageLayout: React.FC<ITreePageLayoutProps> = ({ className, ...props }) => {
  const { styles, cx } = useStyle({ className: 'two-col' })
  const navigate = useNavigate()
  const [ currentMenu, setCurrentMenu ] = useAtom(currentMenuAtom)
  const [ , headerSize ] = useResizeObserver({
    selector: '.ant-page-header',
  })

  useInlineStyle({
    styles: {
      '--pageHeader': `${headerSize.blockSize}px`,
    },
    selector: `.two-col`,
  })

  return (
          <PageContainer
                  breadcrumbRender={false}
                  title={
                    <Space>
                      {
                              currentMenu?.parent && <span className={'black'}
                                                           onClick={() => {
                                                             navigate({
                                                               to: currentMenu?.parent?.path,
                                                             }).then(() => {
                                                               setCurrentMenu(currentMenu.parent!)
                                                             })
                                                           }}> <ArrowLeftOutlined/></span>
                      }
                      <span>{currentMenu?.title}</span>
                    </Space>
                  }
                  className={cx(styles.container, styles.pageCard, styles.layoutTable, className)}
                  {...props.pageProps}
          >
            <Flexbox horizontal className={styles.authHeight}>
              <DraggablePanel expandable={false}
                              placement="left"
                              defaultSize={{ width: 300 }}
                              maxWidth={500}
                              style={{ position: 'relative' }}
                              {...props.draggableProps}
              >
                {props.leftPanel}
              </DraggablePanel>
              <Flexbox className={styles.box}>
                {props.children}
              </Flexbox>
            </Flexbox>
          </PageContainer>
  )
}

export default TwoColPageLayout