import { useState } from 'react';
import { HiOutlineSquares2X2, HiSquaresPlus } from 'react-icons/hi2';
import ProductForm from './ProductForm';
import ComboMaster from '../ComboPack/ComboMaster';
import ProductList from './ProductList';
import ComboList from '../ComboPack/ComboMasterlist';
import { ApplicationPreferences } from '../../Features/BrachLogin/BranchLogin';
import { useSelector } from 'react-redux';
import "../../Styles/BookingScreen/Components/SelectionComponent/SelectionComponent.scss"

const ProductMaster = ({ formType }) => {
  const appPreferences = useSelector(ApplicationPreferences);
  const commonModulePreference = appPreferences?.find(
    (preference) => preference?.PreferredCatName === 'Common Module'
  )?.PreferenceCatDetails;
  const sportsAppPreference = commonModulePreference?.find(
    (preference) => preference?.PreferredSubCatName === 'SportsApp' && preference?.PreferredStatus === 'Y'
  );
  const [selectedComponent, setselectedComponent] = useState(
    formType ? formType : 'Product'
  );
  console.log(selectedComponent, 'selectedComponent');
  const ComponentSelect = (value) => {
    console.log(value, 'valuevalue');
    setselectedComponent(value);
  };
  return (
    <div style={{ width: '100%' }}>
      {!sportsAppPreference ? (
        <div
          className="ProductMasterListSwitchBTN"
        >
          <div
            className={selectedComponent === 'Product' ? 'selected' : ''}
            onClick={() => ComponentSelect('Product')}
          >
            {/* <HiOutlineSquares2X2 size={16} /> */}
           Product
          </div>
            <div
              className={selectedComponent === 'Combo' ? 'selected' : ''}
              onClick={() => ComponentSelect('Combo')}
            >
              {/* <HiSquaresPlus size={16} /> */}
               Combo Product
            </div>
        </div>
      ) : (
        <div className="add-slot-header">Add Slot</div>
      )}
      <div style={{ width: '100%' }}>
        {selectedComponent === 'Product' ? <ProductList /> : <ComboList />}
      </div>
    </div>
  );
};
export default ProductMaster;