import React, {FC} from "react";
import {colors} from "./tree/Colors";
import {request} from "./tree/Color";
import {__} from "./globals";
import {useSetAtom} from "jotai";
import {SelectActionPopupWindowStateAtom} from "./tree/atoms";
import {EmulatedButton} from "./tree/EmulatedButton";

export type SelectActionButtonProps = { branchID: string }

export const SelectActionButton: FC<SelectActionButtonProps> = ({branchID}) => {
    const color = colors.blue;
    const setSelectActionPopupWindowState = useSetAtom(SelectActionPopupWindowStateAtom)

    return <EmulatedButton
        className={`--h-80 border-px border-opacity-40 border-blue-shade-200 flex items-center space-x-2 ${request(color).background(100)} text-base font-semibold ${request(color).text(10)} rounded-full --rounded-3 px-3 py-1  transition-all hover:scale-105 active:scale-100 `}
        onClickCapture={() => {
            setSelectActionPopupWindowState({
                isOpen: true,
                context: {
                    action: null,
                    targetBranchId: branchID
                }
            })
        }}>
        <div className={`flex items-center min-h-4 min-w-4 ${request(color).background(10)} rounded-5`}>
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2}
                 stroke="currentColor" className={color.text(100)}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
            </svg>
        </div>
        <span> {__('Select Action')}</span>
    </EmulatedButton>
}