import React from 'react'
import styled from 'styled-components'
import Block from '../Primitives/Block/Block'
import Directory from '../Directory/Directory'
import { normalizeDirectoryData } from '../Directory/utils'
import SidebarHeader from './SidebarHeader'
import SidebarFooter from './SidebarFooter'
import type { DirectoryData, DirectoryProps } from '../Directory/types'
import type { SidebarMerchantInfo, SidebarStateChangeType } from './types'

const DirectoryContainer = styled(Block)<{
    $showTopBlur?: boolean
    $showBottomBlur?: boolean
}>`
    flex: 1;
    overflow-y: auto;
    position: relative;

    &::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }
    -ms-overflow-style: none;
    scrollbar-width: none;
    scrollbar-color: transparent transparent;
`

export type SidebarContentProps = {
    sidebarTopSlot?: React.ReactNode
    merchantInfo?: SidebarMerchantInfo
    isExpanded: boolean
    isScrolled: boolean
    sidebarCollapseKey: string
    onToggle: () => void
    sidebarNavId?: string
    showTopBlur: boolean
    showBottomBlur: boolean
    data: DirectoryData[] | null
    idPrefix: string
    activeItem?: string | null
    onActiveItemChange?: (item: string | null) => void
    defaultActiveItem?: string | null
    iconOnlyMode?: boolean
    footer?: React.ReactNode
    setIsHovering?: (isHovering: boolean) => void
    sidebarState?: SidebarStateChangeType
    showHierarchyLines?: DirectoryProps['showHierarchyLines']
    hierarchyLineBorderRadius?: DirectoryProps['hierarchyLineBorderRadius']
    expandedItems?: DirectoryProps['expandedItems']
    defaultExpandedItems?: DirectoryProps['defaultExpandedItems']
    onExpandedItemsChange?: DirectoryProps['onExpandedItemsChange']
    onItemExpand?: DirectoryProps['onItemExpand']
    enableVirtualization?: DirectoryProps['enableVirtualization']
    virtualization?: DirectoryProps['virtualization']
}

const SidebarContent: React.FC<SidebarContentProps> = ({
    sidebarTopSlot,
    merchantInfo,
    isExpanded,
    isScrolled,
    sidebarCollapseKey,
    onToggle,
    sidebarNavId,
    showTopBlur,
    showBottomBlur,
    data,
    idPrefix,
    activeItem,
    onActiveItemChange,
    defaultActiveItem,
    iconOnlyMode = false,
    footer,
    setIsHovering,
    sidebarState = 'expanded',
    showHierarchyLines = false,
    hierarchyLineBorderRadius = 0,
    expandedItems,
    defaultExpandedItems,
    onExpandedItemsChange,
    onItemExpand,
    enableVirtualization = false,
    virtualization,
}) => {
    const directoryData = normalizeDirectoryData(data)

    return (
        <Block
            data-element="sidebar-content"
            width={iconOnlyMode ? '58px' : '250px'}
            height="100%"
            display="flex"
            flexDirection="column"
            position="relative"
            minWidth={0}
            flexShrink={0}
            overflow="hidden"
            transition="width 0.35s cubic-bezier(0.4, 0, 0.2, 1)"
            style={{
                willChange: 'width',
                transform: 'translateZ(0)',
                contain: 'layout paint',
            }}
        >
            <SidebarHeader
                sidebarTopSlot={sidebarTopSlot}
                merchantInfo={merchantInfo}
                isExpanded={isExpanded}
                isScrolled={isScrolled}
                sidebarCollapseKey={sidebarCollapseKey}
                onToggle={onToggle}
                sidebarNavId={sidebarNavId}
                iconOnlyMode={iconOnlyMode}
            />

            <DirectoryContainer
                data-directory-container
                id={sidebarNavId}
                role="region"
                aria-label="Navigation menu"
                $showTopBlur={showTopBlur}
                $showBottomBlur={showBottomBlur}
                onMouseEnter={() => setIsHovering?.(true)}
            >
                <Directory
                    directoryData={directoryData}
                    idPrefix={idPrefix}
                    activeItem={activeItem}
                    onActiveItemChange={onActiveItemChange}
                    defaultActiveItem={defaultActiveItem}
                    iconOnlyMode={iconOnlyMode}
                    showHierarchyLines={showHierarchyLines}
                    hierarchyLineBorderRadius={hierarchyLineBorderRadius}
                    expandedItems={expandedItems}
                    defaultExpandedItems={defaultExpandedItems}
                    onExpandedItemsChange={onExpandedItemsChange}
                    onItemExpand={onItemExpand}
                    enableVirtualization={enableVirtualization}
                    virtualization={virtualization}
                />
            </DirectoryContainer>

            <SidebarFooter footer={footer} sidebarState={sidebarState} />
        </Block>
    )
}

export default SidebarContent