import { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import PozoEstimateIcon from '../UtillComponents/Pozo retail icons/PozoEstimateIcon.jsx';
import { UpOutlined } from '@ant-design/icons';
import {
  GlobalOrderCardDetails,
  GlobalEstimateBooking,
  changeEstimateBooking,
  changeSelProdWiseEst,
  ChangeOverAllDiscSales,
  ChangeOverAllDiscEstimate,
} from '../../../../Features/BookingScreen/BookingData/BookingData';
import BSEstimateModal from '../BookingFunctionality/BSEstModal';
import { GlobalpreOrderOpen } from '../../../../Features/BookingScreen/PreOrder/PreOrder.js';
import TooltipWrapper from '../../../../Components/Tooltip/Tooltip';
import { isMobile } from 'react-device-detect';
import { Popover } from 'antd';
import PozoSalesIcon from './Pozo retail icons/PozoSalesIcon.jsx';
import PozoCombinationIcon from './Pozo retail icons/PozoCombinationIcon.jsx';

const BSNavBarEstimate = () => {
  const dispatch = useDispatch();
  const OrderCardDetails = useSelector(GlobalOrderCardDetails);
  const preOrderOpen = useSelector(GlobalpreOrderOpen);
  const EstBooking = useSelector(GlobalEstimateBooking);
  const [EstModalOpen, setEstModalOpen] = useState(false);
  const [PopOpen, setPopOpen] = useState(false);
  const ChangeEstMethod = () => {
    if (!preOrderOpen) {
      if (OrderCardDetails.length > 0) {
        setEstModalOpen(true);
      }
    }
  };
  const EstHandleCancel = () => {
    setEstModalOpen(false);
  };
  const EnableOptions = () => {
    setPopOpen(!PopOpen);
  };
  const ChangeEstimateOption = (data) => {
    dispatch(changeEstimateBooking(data));
    dispatch(ChangeOverAllDiscSales(0));
    dispatch(ChangeOverAllDiscEstimate(0));

    setPopOpen(false);
  };
  const handlePopoverVisible = (visible) => {
    setPopOpen(visible);
  };
  return (
    <div className="BSBilling7-icon-flex">
      {/* <BiSolidOffer className='BSBillingNav-icon'/> */}
      <TooltipWrapper
        title={
          EstBooking === 'OvrAllEst'
            ? 'Estimate'
            : EstBooking === 'ParEst'
              ? 'Sales & Estimate'
              : 'Sales'
        }
        isMobile={isMobile}
      >
        <div className="EstimateButton" style={{ marginLeft: "5px" }}>
          <div>
            {EstBooking === 'Sales' && <PozoSalesIcon />}
            {EstBooking === 'OvrAllEst' && <PozoEstimateIcon />}
            {EstBooking === 'ParEst' && (
              <PozoCombinationIcon onClick={() => ChangeEstMethod()} />
            )}
          </div>

          <div>
            <Popover
              title="SET AS DEFAULT"
              open={PopOpen}
              onVisibleChange={handlePopoverVisible}
              content={
                <div className="EstPopupContent">
                  <div
                    className="EstOption"
                    onClick={() => {
                      ChangeEstimateOption('Sales');
                    }}
                  >
                    {' '}
                    <PozoSalesIcon
                      className={
                        EstBooking === 'Sales'
                          ? 'selectedBookingType'
                          : 'otherBookingType'
                      }
                    />{' '}
                    Sales
                  </div>
                  <div
                    className="EstOption"
                    onClick={() => {
                      ChangeEstimateOption('OvrAllEst');
                    }}
                  >
                    <PozoEstimateIcon
                      className={
                        EstBooking === 'OvrAllEst'
                          ? 'selectedBookingType'
                          : 'otherBookingType'
                      }
                    />{' '}
                    Estimate
                  </div>
                  <div
                    className="EstOption"
                    onClick={() => {
                      ChangeEstimateOption('ParEst');
                    }}
                  >
                    <PozoCombinationIcon
                      className={
                        EstBooking === 'ParEst'
                          ? 'selectedBookingType'
                          : 'otherBookingType'
                      }
                    />
                    Sales & Estimate
                  </div>
                </div>
              }
              trigger="click"
            >
              <button className="Estoptbtn">
                {' '}
                <UpOutlined onClick={EnableOptions} />{' '}
              </button>
            </Popover>
          </div>
        </div>
      </TooltipWrapper>
      <div>
        {EstModalOpen && (
          <BSEstimateModal
            EstModalOpen={EstModalOpen}
            EstHandleCancel={() => EstHandleCancel()}
          />
        )}
      </div>
    </div>
  );
};
export default BSNavBarEstimate;