import { useEffect, useState, useCallback } from 'react';
import { useDispatch } from 'react-redux';
import PozoWeightScaleIcon from './Pozo retail icons/PozoWeightScaleIcon';
import {
  changeWeightScalePort,
  changeWeightScaleWeight,
} from '../../../../Features/BookingScreen/BookingData/BookingData';
import WeightScaleComp from '../../../../Components/WeightScale/weightScale.jsx';
import { Messages } from '../../../../Components/Notifications/Messages';
import TooltipWrapper from '../../../../Components/Tooltip/Tooltip';
import { isMobile } from 'react-device-detect';
import WeightScaleApp from '../../WeightscaleApp.jsx';

const BSNavBarWeightScale = ({Combo}) => {
  const dispatch = useDispatch();
  const [WeightScale, setWeightScale] = useState(false);
  const [wsport, setwsport] = useState(null);
  const [WeightScale2, setWeightScale2] = useState(false);
  const [messageType, setMessageType] = useState(null);
  const [messageData, setMessageData] = useState(null);
console.log(WeightScale,"WeightScale")
  useEffect(() => {
    if (WeightScale2 === true) {
      setWeightScale(true);
    } else {
      setWeightScale(false);
    }
  }, [WeightScale2]);
  const handleWeightScaleOpen = () => {
     
              setWeightScale2(!WeightScale2);
              dispatch(changeWeightScalePort(!WeightScale2));
             
     
  };
  const setWsport = async (e) => {
    if (e?.readable) {
      setwsport(e);
    } else {
      setMessageType('error');
      setMessageData('Please check weightscale connection');
      setWeightScale2(false);
    }
  };

  const myfun = async (e) => {
    console.log(e,"weight")
    dispatch(changeWeightScaleWeight(e));
  };

  const onComplete = useCallback(() => {
    setMessageData(null);
    setMessageType(null);
  }, []);
  const msgAlert = async (e) => {
    setMessageType(e.type);
    setMessageData(e.msg);
  };
  return (
    <div className="BSBilling7-icon-flex">
      <Messages
        messageType={messageType}
        messageData={messageData}
        onComplete={onComplete}
      />
      <TooltipWrapper title={'Weight-Scale'} isMobile={isMobile}>
        {Combo == "combolayout" ?
          <button
              className="BSC1Search-button1"
              style={{ backgroundColor: WeightScale2 ? '#52c41a' : '#ff4d4f' }}
              onClick={handleWeightScaleOpen}
            >
              Weight Scale
            </button>
        :
        
        <PozoWeightScaleIcon
          fill={WeightScale2 ? 'rgb(82, 196, 26)' : '#ff4d4f'}
          className="BSBillingNav-icon"
          onClick={handleWeightScaleOpen}
        />
        }
        {/* <FeaturesFunctionalities handleWeightScaleCancel={handleWeightScaleCancel}  WeightScale={WeightScale} /> */}
   {(WeightScale == true && isMobile) && (
        <WeightScaleApp weightscaleclose={setWeightScale2} />
      )}

      {(WeightScale == true && !isMobile) && (
        <WeightScaleComp
          testfun={myfun}
          setportfun={setWsport}
          portval={wsport}
          portclose={WeightScale2}
          msg={msgAlert}
        />
      )}
      </TooltipWrapper>
    </div>
  );
};
export default BSNavBarWeightScale;