import { useEffect, useState } from 'react';
import { Popover, Input, Button } from 'antd';
import { useDispatch, useSelector } from "react-redux";
import { GiPayMoney } from "react-icons/gi";
import { GlobaltipAmount, changeTipAmount } from "../../../../Features/BookingScreen/BookingData/BookingData";
import TooltipWrapper from '../../../../Components/Tooltip/Tooltip';
import { isMobile } from 'react-device-detect';

const BSTipAmount = () => {
    const globalTipAmount = useSelector(GlobaltipAmount);
    const [visible, setVisible] = useState(false);
    const [tipAmount, setTipAmount] = useState(globalTipAmount);
    const dispatch = useDispatch();

    const handleOk = () => {
        if (changeTipAmount) {
            dispatch(changeTipAmount(tipAmount));
        }
        setVisible(false);
    };

    const handleCancel = () => {
        setTipAmount('');
        setVisible(false);
    };
  useEffect(() => {
    if (globalTipAmount > 0) {
      setTipAmount(globalTipAmount)
    }
    else {
      setTipAmount(0)

    }
  }, [globalTipAmount])

  console.log(globalTipAmount, "tipAmounttipAmount");

    const content = (
        <div style={{ width: 200 }}>
            <Input
                placeholder="Enter tip amount"
                value={tipAmount}
                onChange={(e) => setTipAmount(e.target.value)}
                type="number"
            />
            <div style={{ marginTop: 10, display: 'flex', justifyContent: 'space-between' }}>
                <Button type="primary" onClick={handleOk}>
                    OK
                </Button>
                <Button onClick={handleCancel}>Cancel</Button>
            </div>
        </div>
    );

    return (<>
        <TooltipWrapper title="Tip Amount" isMobile={isMobile}>
            <Popover
                content={content}
                title="Tip Amount"
                trigger="click"
                visible={visible}
                onVisibleChange={(visible) => setVisible(visible)}
            >
                <GiPayMoney
                    fill={"rgb(18, 146, 238)"}
                    style={{ fontSize: 24, cursor: 'pointer' }}
                    onClick={() => setVisible(!visible)}
                />
            </Popover>
        </TooltipWrapper>
    </>);
};

export default BSTipAmount;