import React, {FC} from "react";
import {EmulatedButton} from "./EmulatedButton";
import {useAtomValue, useSetAtom} from "jotai";
import {AddNewTreePopupWindowIsOpen, CurrentDashboardSectionIdAtom} from "./atoms";
import {TreeDashboardSection} from "./TreeDashboardSections";

export type NewOfferProps = {
}

export const NewTreeButton: FC<NewOfferProps> = ({}) => {
    const openNewTreePopup = useSetAtom(AddNewTreePopupWindowIsOpen)
    const currentDashboardSection = useAtomValue(CurrentDashboardSectionIdAtom)

    if (currentDashboardSection !== TreeDashboardSection.Offers) {
        return
    }
    return <EmulatedButton className="min-w-9 min-h-9 max-w-9 max-h-9 rounded-full bg-gray-200 text-gray-600 flex items-center justify-center"
                           onClick={() => {
                                openNewTreePopup(true)
                           }}>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
             className="min-w-5 min-h-5 max-w-5 max-h-5">
            <path
                d="M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z"/>
        </svg>
    </EmulatedButton>
};