import React, {FC} from "react";
import {useNavigationActions, useOnHeight, UseOnHeightCallback, UseScreenNavigationActions} from "./tree/hooks";
import {LargeButton} from "./tree/LargeButton";
import {__} from "./globals";
import {ScreenNavigation} from "./PopupWindow";
import {ScreenNavigation} from "./PopupWindow";
import {Button} from "./tree/cards/Button";

export type ButtonMeta = {
    label: string,
    onClick?: () => void,
}
export type BottomButtonsProps = ScreenNavigation & {
    onHeight?: UseOnHeightCallback,
    popupId: string,
    screensLength: number,
    contentWidth?: number,
    buttons?: ButtonMeta[],
}

export const BottomButtons: FC<BottomButtonsProps> = ({
                                                          onHeight,
                                                          popupId,
                                                          screensLength,
                                                          contentWidth,
                                                          buttons,
                                                          currentScreenId,
                                                          setCurrentScreenId
                                                      }) => {
    const ref = useOnHeight(onHeight)
    const {next} = useNavigationActions(currentScreenId, setCurrentScreenId)

    const isLast = currentScreenId === screensLength;

    return <div ref={ref} className="--absolute bottom-0 pt-2 pb-4 flex flex-col-reverse items-center gap-2 border-t-px border-gray-150 w-full"
                style={{width: contentWidth}}>
        {/*secondary, is always custom and is optional*/}
        {buttons?.[1] && <div className="flex flex-col gap-1 items-center w-full">
            <Button preset={'gray'} size={'large'} onClick={() => buttons[1].onClick?.()}>
                {buttons[1].label}
            </Button>
            <p className="text-smaller-1 text-gray-350">{__('Select more specific products by combining this with another filter')}</p>
        </div>}
        {/*primary, can be custom or fallback to default ("next", etc.)*/}
        <Button preset="blue" size="large" className="w-full" onClick={() => {
            if (buttons && buttons[0].onClick) {
                buttons[0].onClick()
            } else if (!isLast) {
                next()
            }
        }}>{buttons ? buttons[0]?.label : isLast ? __('Apply') : __('Next')}</Button>
    </div>

}