import React, {FC, useMemo, useRef, useState} from "react";
import {useOpenPopupsCount} from "./hooks";
import {getPopupStackDimensionCalculators} from "./ulitilies";
import {PopupWindow} from "../PopupWindow";
import {__} from "../globals";
import {SelectMenuPopupWindowState} from "./atoms";
import {MultiSelectList} from "./fields/MultiSelectList";

type SelectMenuPopupWindowProps = {
    data: SelectMenuPopupWindowState,
    index: number,
}

export const SelectMenuPopupWindow: FC<SelectMenuPopupWindowProps> = ({data, index}) => {
    const popupsCount = useOpenPopupsCount()
    const stackDimensions = getPopupStackDimensionCalculators(popupsCount - index)
    const [selectedValues, setSelectedValues] = useState<string[]>(data.context.data.selectedValues)
    const [isOpen, setIsOpen] = useState(true)
    const hasClosedRef = useRef(false)

    const closeWithAnimation = (closeData: Parameters<typeof data.onClose>[0], shouldAnimate: boolean = true) => {
        if (hasClosedRef.current) {
            return
        }

        hasClosedRef.current = true

        if (shouldAnimate) {
            setIsOpen(false)
            data.onClose(closeData, {
                deferWindowRemoval: true,
            })
            return
        }

        data.onClose(closeData)
    }

    return <PopupWindow
        id={`select-menu-${data.context.id}`}
        zIndex={1000000 + 10 + index}
        screens={useMemo(() => [
            {
                id: 1,
                title: data.context.data.window?.title,
                description: data.context.data.window?.description,
                content: ({height}) => {
                    const nonListReservedHeight = 100//0//176
                    const menuMaxHeight = Math.max(120, height - nonListReservedHeight)

                    return <div className="w-full overflow-y-auto" style={{maxHeight: height}}>
                        <MultiSelectList
                            autoSelectSearchOnMount={true}
                            options={data.context.data.options}
                            selectedValues={selectedValues}
                            maxHeight={menuMaxHeight}
                            onSelectedValue={(option) => {
                                setSelectedValues(prev => [...prev, option.id])
                            }}
                            onRemovedValue={({id}) => {
                                setSelectedValues(prev => prev.filter(value => value !== id))
                            }}
                        />
                        {/* Placeholder for select menu content - to be implemented */}
                    </div>
                },
                showBottomNavigation: true,
                primaryBottom: () => {
                    return {
                        label: __('Done'),
                        onClick: () => {
                            closeWithAnimation({
                                status: 'success',
                                values: selectedValues
                            })
                        }
                    }
                }
            }
        ], [selectedValues, setSelectedValues, data])}
        screenId={1}
        defaultScreenId={1}
        setCurrentScreenId={() => {}}
        isOpen={isOpen}
        onClose={(context) => closeWithAnimation({status: context === 'success' ? 'success' : 'fail'}, false)}
        customTop={stackDimensions.top}
        customWidth={stackDimensions.width}
    />
}