import React, {FC, useMemo} from "react";
import {Card} from "./Card";
import {colors} from "./Colors";
import {CardItem} from "./CardItem";
import {__} from "../globals";
import {CardItemSecondaryValue} from "./CardItemSecondaryValue";
import {ColorOption, hover} from "./Color";
import {OfferData, useNodesStore} from "./store";
import {RemoveButton} from "./RemoveButton";
import {useCardRenderer, useOpenEditOfferPopup, useOpenSelectActionsPopupWindow} from "./hooks";
import {PopupWindowStateContext, SelectActionContextOffers, TreeContextData} from "./atoms";
import {GroveActions} from "./GroveActions";
import {TestablesSaver} from "./TestablesSaver";
import {useOpenTestablesPopupWindow} from "./useOpenTestablesPopupWindow";
import {useBranch} from "./TreeHooks";
import classNames from "classnames";

export type OffersCardProps = ColorOption & {
    id?: string,
    offer: OfferData,
    branchID: string,
    afterContent?: ((isHovered: boolean) => React.ReactNode),
    afterContentInside?: (() => React.ReactNode),
}

export const OfferCard: FC<OffersCardProps> = ({id, branchID, offer, color, afterContent, afterContentInside}) => {
    const removeOffer = useNodesStore(store => store.removeOffer)
    const renderer = useCardRenderer(offer.id, 'offers')
    const branch = useBranch(branchID)
    /*const openTestablePopupWindow = useOpenTestablesPopupWindow();
    const updateOffer = useNodesStore(store => store.updateOffer)*/
    const openEditOfferPopup = useOpenEditOfferPopup(offer.id)

    if (!branch) {
        console.error('OfferCard: branch not found for offer', offer.id, branchID);
        return null;
    }

    if (!renderer) {
        console.error('OfferCard: renderer not found for offer', offer.id);
        return null;
    }

    let cardItem = <CardItem color={color}
                             context={'offers'}
                             position={'single'}
                             cardRenderer={renderer}
                             colors={useMemo(() => ({
                                 background: {
                                     color,
                                     tint: (color) => `${color.background(110)} ${color.background(hover(100))}`
                                 },
                                 icon: {
                                     background: {
                                         color,
                                         tint: (color) => color.background(10)
                                     },
                                     color: {
                                         color,
                                         tint: (color) => color.text(90)
                                     }
                                 }
                             }), [color])}
                             onClick={openEditOfferPopup}
    />;
    return <Card id={id}
                 color={color}
                 outerRing={true}
                 outerRingWidth={'border-[2px]'}
                 outerRingRoundness="rounded-[22px]"
                 roundness={'rounded-[20px]'}
                 explicitWidth={false}
                 innerRing={false}
                 beforeCardInsideContent={afterContentInside?.()}
                 beforeCardInsideContentHorizontal={branch.isInsideAnotherBranch()}
                 /*beforeCardInsideContent={!branch.isInsideAnotherBranch()? afterContentInside?.() : ''}*/
                 outerRingColor={{
                     default: {
                         color,
                         tint: (color) => color.border(40)
                     },
                     highlight: {
                         color,
                         tint: (color) => color.border(20)
                     }
                 }}
                 enableSelfHovering={true}
                 afterContent={
                     isHovered => <>
                         <RemoveButton positionX={'right-corner'}
                                       onClick={() => {
                                           removeOffer(offer.id, branchID)
                                       }}
                                       entityID={offer.id}
                                       show={isHovered}
                         />
                         {afterContent?.(isHovered)}
                     </>
                 }
                 outsideContent={renderer?.OutsideComputedValue &&
                     <renderer.OutsideComputedValue color={color} context={'offers'} id={offer.id}/>}

    >
        {branch.isInsideAnotherBranch() ? <div className={classNames('', {
            'relative flex items-center': true,
        })}>
            {afterContentInside?.()}
            {cardItem}
        </div> : <>
            {cardItem}
        </>}
    </Card>
}