import React, { useRef, useState } from 'react'

import Button from '../../Button/Button'
import Icon from '../../Icons/Icon'
import { SideDrawer } from '../../SideDrawer/SideDrawer'
import commonStyles from '../Common/_left-nav-common.module.scss'
import { type LeftNavProps } from '../LeftNav'
import styles from './_left-nav-mobile.module.scss'
import LeftNavFooter from '../Common/LeftNavFooter/LeftNavFooter'
import LeftNavLinkContainer from '../Common/LeftNavLinkContainer/LeftNavLinkContainer'

const LeftNavMobile = ({
  logo,
  footer,
  leftNavLinks,
  breadcrumbs,
  mobileProps,
  accountPopoverProps,
  environment = 'production',
  routerComponent,
  routerProp,
  languageConfig,
  hideCopyright = false,
  qaTestId = 'left-nav-mobile',
  linkSegmentIndexToMatch,
}: Omit<
  LeftNavProps,
  'userPermissions' | 'navigate' | 'heightOffset'
>): React.JSX.Element => {
  const [isOpen, setIsOpen] = useState(false)
  const sideBarRef = useRef<HTMLDivElement>(null)
  const { mobileHeaderChildren, rightHamburgerMenu } = mobileProps ?? {}

  const closeDrawer = () => {
    setIsOpen(false)
  }

  const HamburgerMenu = () => {
    return (
      <Button
        as='unstyled'
        onClick={() => setIsOpen(true)}
        className={styles.navButton}
      >
        <Icon
          icon='hamburger'
          className={styles.hamburgerIcon}
          color='purple'
        />
      </Button>
    )
  }

  return (
    <>
      <div
        className={`${styles.headerContainer} ${
          rightHamburgerMenu ? styles.reverse : ''
        }`}
        qa-test-id={`${qaTestId}-header`}
      >
        {!rightHamburgerMenu ? HamburgerMenu() : null}
        {mobileHeaderChildren}
        {rightHamburgerMenu ? HamburgerMenu() : null}
      </div>
      <SideDrawer
        isOpen={isOpen}
        closeCallout={closeDrawer}
        logoUrl={logo.url}
        noFooterPadding
        footerContent={({ close }) => (
          <LeftNavFooter
            expanded
            accountPopoverProps={{
              ...accountPopoverProps,
            }}
            closeMobileDrawer={close}
            footer={footer}
            mobile={!!mobileProps}
            languageConfig={languageConfig}
            hideCopyright={hideCopyright}
          />
        )}
        noGradient
        noContentPadding
        qaTestId={`${qaTestId}-side-drawer`}
      >
        {({ height, close }) => (
          <div
            className={commonStyles.commonContainer}
            ref={sideBarRef}
            style={{
              overflowY: 'scroll',
              overflowX: 'hidden',
              height,
            }}
          >
            <LeftNavLinkContainer
              containerHeight={height}
              containerScrollHeight={sideBarRef.current?.scrollHeight ?? 0}
              breadcrumbs={breadcrumbs}
              leftNavLinks={leftNavLinks}
              isExpanded
              isUseable
              environment={environment}
              routerComponent={routerComponent}
              routerProp={routerProp}
              close={close}
              linkSegmentIndexToMatch={linkSegmentIndexToMatch}
            />
          </div>
        )}
      </SideDrawer>
    </>
  )
}

export default LeftNavMobile