// import React from "react";
// import { Text, TouchableOpacity,View,ScrollView } from "react-native";
// import { customStyles,GetPageTheme } from "../styles/Global";
// import { useRoute } from '@react-navigation/native';
// const HeaderTabs = (props) => {
//   const route = useRoute();
//   const PageTheme=GetPageTheme(props.DarkTheme,route.name);
//   const customStyle=customStyles(props.DarkMode,route.name);
//   const ST=props.StaticText || {};
//   const isAdhocScreen=props.isAdhocScreen;
//   const isBeatPlan=props.isBeatPlan;
//   const isDBPOSMScreen=props.isDBPOSMScreen;
//   const isAddStoreScreen=props.isAddStoreScreen;
//   const isNonMerchan=props.isNonMerchans;
//   const isNonProgs=props.isNonProgs;
//   const isStoreSearch=props.isStoreSearch;
//   return (
//     <View style={customStyle.storeTab_Con}>
//         <ScrollView style={customStyle.storeTab_MenuCon} contentContainerStyle={customStyle.storeTab_Menu} horizontal={true}>
//             <TouchableOpacity style={[customStyle.storeTab_pill,((!isAdhocScreen && !isBeatPlan && !isDBPOSMScreen && !isAddStoreScreen && !isNonMerchan && !isNonProgs  && !isStoreSearch)?customStyle.storeTab_pillActive:{})]} onPress={()=>{props.navigation.pop();props.navigation.push('StoreList')}}>
//                 <Text style={[customStyle.storeTab_pillText,((!isAdhocScreen && !isBeatPlan && !isDBPOSMScreen && !isAddStoreScreen && !isNonMerchan && !isNonProgs&& !isStoreSearch)?customStyle.storeTab_pillActiveText:{color:PageTheme.$text_color})]}>{ST.Planned}</Text>
//             </TouchableOpacity>
//             <TouchableOpacity style={[customStyle.storeTab_pill,(isAdhocScreen?customStyle.storeTab_pillActive:{})]} onPress={()=>{props.navigation.pop();props.navigation.push('StoreList',{'isAdhoc': true,'isBeat':false,'isNonMerchans':false,'isNonProgs':false,'isStoreSearch':false})}}>
//                 <Text style={[customStyle.storeTab_pillText,(isAdhocScreen?customStyle.storeTab_pillActiveText:{color:PageTheme.$text_color})]}>{ST.Adhoc}</Text>
//             </TouchableOpacity>
//             {props.ShowBeatPlanList==true && 
//             <TouchableOpacity style={[customStyle.storeTab_pill,(isBeatPlan?customStyle.storeTab_pillActive:{})]} onPress={()=>{props.navigation.pop();props.navigation.push('StoreList',{'isAdhoc': false,'isBeat':true})}}>
//                 <Text style={[customStyle.storeTab_pillText,(isBeatPlan?customStyle.storeTab_pillActiveText:{color:PageTheme.$text_color})]}>{'Beat Plan'}</Text>
//             </TouchableOpacity>
//             }
//             {props.ShowStoreAdd==true && 
//             <TouchableOpacity style={[customStyle.storeTab_pill,(isAddStoreScreen?customStyle.storeTab_pillActive:{})]} onPress={()=>{props.navigation.navigate('AddStoreScreen',{})}}>
//                 <Text style={[customStyle.storeTab_pillText,(isAddStoreScreen?customStyle.storeTab_pillActiveText:{color:PageTheme.$text_color})]}>{'Add Store'}</Text>
//             </TouchableOpacity>
//             }
//             {props.ShowNonMerList==true && 
//             <TouchableOpacity style={[customStyle.storeTab_pill,(isNonMerchan?customStyle.storeTab_pillActive:{})]} onPress={()=>{props.navigation.pop();props.navigation.push('StoreList',{'isAdhoc': false,'isBeat':false,'isNonMerchans':true,'isNonProgs':false,'isStoreSearch':false})}}>
//                 <Text style={[customStyle.storeTab_pillText,(isNonMerchan?customStyle.storeTab_pillActiveText:{color:PageTheme.$text_color})]}>{'Non Merch.'}</Text>
//             </TouchableOpacity>
//             }
//             {props.ShowNonProgram==true && 
//             <TouchableOpacity style={[customStyle.storeTab_pill,(isNonProgs?customStyle.storeTab_pillActive:{})]} onPress={()=>{props.navigation.pop();props.navigation.push('StoreList',{'isAdhoc': false,'isBeat':false,'isNonMerchans':false, 'isNonProgs':true,'isStoreSearch':false})}}>
//                 <Text style={[customStyle.storeTab_pillText,(isNonProgs?customStyle.storeTab_pillActiveText:{color:PageTheme.$text_color})]}>{props.NonProgramLabel}</Text>
//             </TouchableOpacity>
//             }

//             {props.ShowStoreSearch==true && 
//             <TouchableOpacity style={[customStyle.storeTab_pill,(isStoreSearch?customStyle.storeTab_pillActive:{})]} onPress={()=>{props.navigation.pop();props.navigation.push('StoreList',{'isAdhoc': false,'isBeat':false,'isNonMerchans':false, 'isNonProgs':false,'isStoreSearch':true})}}>
//                 <Text style={[customStyle.storeTab_pillText,(isStoreSearch?customStyle.storeTab_pillActiveText:{color:PageTheme.$text_color})]}>{props.ShowStoreSearchLabel}</Text>
//             </TouchableOpacity>
//             }

//             {props.ShowDBPOSM==true && 
//             <TouchableOpacity style={[customStyle.storeTab_pill,(isDBPOSMScreen?customStyle.storeTab_pillActive:{})]} onPress={()=>{props.navigation.navigate('DistributorList',{})}}>
//                 <Text style={[customStyle.storeTab_pillText,(isDBPOSMScreen?customStyle.storeTab_pillActiveText:{color:PageTheme.$text_color})]}>{'Distributors'}</Text>
//             </TouchableOpacity>
//             }

            

//         </ScrollView>
//     </View>
//   );
// };
// export default HeaderTabs;


import React from "react";
import { Text, TouchableOpacity,View,ScrollView } from "react-native";
import { customStyles,GetPageTheme } from "../styles/Global";
import { useRoute } from '@react-navigation/native';

const HeaderTabs = (props) => {
  const route = useRoute();
  const PageTheme = GetPageTheme(props.DarkTheme, route.name);
  const customStyle = customStyles(props.DarkMode, route.name);

  const ST = props.StaticText || {};

  const isAdhocScreen = props.isAdhocScreen;
  const isBeatPlan = props.isBeatPlan;
  const isDBPOSMScreen = props.isDBPOSMScreen;
  const isAddStoreScreen = props.isAddStoreScreen;
  const isNonMerchan = props.isNonMerchans;
  const isNonProgs = props.isNonProgs;
  const isStoreSearch = props.isStoreSearch;

  // 🔹 helper to avoid duplicate navigation
  const navigateIfNotActive = (isActive, routeName, params = {}, useNavigate = false) => {
    if (isActive) return;
    props.navigation.pop();
    if (useNavigate) {
      props.navigation.navigate(routeName, params);
    } else {
      props.navigation.push(routeName, params);
    }
  };
  return (
    <View style={customStyle.storeTab_Con}>
      <ScrollView
        style={customStyle.storeTab_MenuCon}
        contentContainerStyle={customStyle.storeTab_Menu}
        horizontal={true}
      >
        {/* Planned */}
        <TouchableOpacity
          disabled={!isAdhocScreen && !isBeatPlan && !isDBPOSMScreen && !isAddStoreScreen && !isNonMerchan && !isNonProgs && !isStoreSearch}
          style={[
            customStyle.storeTab_pill,
            ((!isAdhocScreen && !isBeatPlan && !isDBPOSMScreen && !isAddStoreScreen && !isNonMerchan && !isNonProgs && !isStoreSearch)
              ? customStyle.storeTab_pillActive
              : {})
          ]}
          onPress={() => navigateIfNotActive(
            (!isAdhocScreen && !isBeatPlan && !isDBPOSMScreen && !isAddStoreScreen && !isNonMerchan && !isNonProgs && !isStoreSearch),
            'StoreList'
          )}
        >
          <Text style={[
            customStyle.storeTab_pillText,
            ((!isAdhocScreen && !isBeatPlan && !isDBPOSMScreen && !isAddStoreScreen && !isNonMerchan && !isNonProgs && !isStoreSearch)
              ? customStyle.storeTab_pillActiveText
              : { color: PageTheme.$text_color })
          ]}>
            {ST.Planned}
          </Text>
        </TouchableOpacity>

        {/* Adhoc */}
        <TouchableOpacity
          disabled={isAdhocScreen}
          style={[customStyle.storeTab_pill, isAdhocScreen ? customStyle.storeTab_pillActive : {}]}
          onPress={() =>
            navigateIfNotActive(isAdhocScreen, 'StoreList', {
              isAdhoc: true,
              isBeat: false,
              isNonMerchans: false,
              isNonProgs: false,
              isStoreSearch: false
            })
          }
        >
          <Text style={[
            customStyle.storeTab_pillText,
            isAdhocScreen ? customStyle.storeTab_pillActiveText : { color: PageTheme.$text_color }
          ]}>
            {ST.Adhoc}
          </Text>
        </TouchableOpacity>

        {/* Beat Plan */}
        {props.ShowBeatPlanList && (
          <TouchableOpacity
            disabled={isBeatPlan}
            style={[customStyle.storeTab_pill, isBeatPlan ? customStyle.storeTab_pillActive : {}]}
            onPress={() =>
              navigateIfNotActive(isBeatPlan, 'StoreList', {
                isAdhoc: false,
                isBeat: true
              })
            }
          >
            <Text style={[
              customStyle.storeTab_pillText,
              isBeatPlan ? customStyle.storeTab_pillActiveText : { color: PageTheme.$text_color }
            ]}>
              Beat Plan
            </Text>
          </TouchableOpacity>
        )}

        {/* Add Store */}
        {props.ShowStoreAdd && (
          <TouchableOpacity
            disabled={isAddStoreScreen}
            style={[customStyle.storeTab_pill, isAddStoreScreen ? customStyle.storeTab_pillActive : {}]}
            onPress={() =>
              navigateIfNotActive(isAddStoreScreen, 'AddStoreScreen', {}, true)
            }
          >
            <Text style={[
              customStyle.storeTab_pillText,
              isAddStoreScreen ? customStyle.storeTab_pillActiveText : { color: PageTheme.$text_color }
            ]}>
              Add Store
            </Text>
          </TouchableOpacity>
        )}

        {/* Non Merch */}
        {props.ShowNonMerList && (
          <TouchableOpacity
            disabled={isNonMerchan}
            style={[customStyle.storeTab_pill, isNonMerchan ? customStyle.storeTab_pillActive : {}]}
            onPress={() =>
              navigateIfNotActive(isNonMerchan, 'StoreList', {
                isAdhoc: false,
                isBeat: false,
                isNonMerchans: true,
                isNonProgs: false,
                isStoreSearch: false
              })
            }
          >
            <Text style={[
              customStyle.storeTab_pillText,
              isNonMerchan ? customStyle.storeTab_pillActiveText : { color: PageTheme.$text_color }
            ]}>
              Non Merch.
            </Text>
          </TouchableOpacity>
        )}

        {/* Non Program */}
        {props.ShowNonProgram && (
          <TouchableOpacity
            disabled={isNonProgs}
            style={[customStyle.storeTab_pill, isNonProgs ? customStyle.storeTab_pillActive : {}]}
            onPress={() =>
              navigateIfNotActive(isNonProgs, 'StoreList', {
                isAdhoc: false,
                isBeat: false,
                isNonMerchans: false,
                isNonProgs: true,
                isStoreSearch: false
              })
            }
          >
            <Text style={[
              customStyle.storeTab_pillText,
              isNonProgs ? customStyle.storeTab_pillActiveText : { color: PageTheme.$text_color }
            ]}>
              {props.NonProgramLabel}
            </Text>
          </TouchableOpacity>
        )}

        {/* Store Search */}
        {props.ShowStoreSearch && (
          <TouchableOpacity
            disabled={isStoreSearch}
            style={[customStyle.storeTab_pill, isStoreSearch ? customStyle.storeTab_pillActive : {}]}
            onPress={() =>
              navigateIfNotActive(isStoreSearch, 'StoreList', {
                isAdhoc: false,
                isBeat: false,
                isNonMerchans: false,
                isNonProgs: false,
                isStoreSearch: true
              })
            }
          >
            <Text style={[
              customStyle.storeTab_pillText,
              isStoreSearch ? customStyle.storeTab_pillActiveText : { color: PageTheme.$text_color }
            ]}>
              {props.ShowStoreSearchLabel}
            </Text>
          </TouchableOpacity>
        )}

        {/* Distributors */}
        {props.ShowDBPOSM && (
          <TouchableOpacity
            disabled={isDBPOSMScreen}
            style={[customStyle.storeTab_pill, isDBPOSMScreen ? customStyle.storeTab_pillActive : {}]}
            onPress={() =>
              navigateIfNotActive(isDBPOSMScreen, 'DistributorList', {}, true)
            }
          >
            <Text style={[
              customStyle.storeTab_pillText,
              isDBPOSMScreen ? customStyle.storeTab_pillActiveText : { color: PageTheme.$text_color }
            ]}>
              Distributors
            </Text>
          </TouchableOpacity>
        )}

      </ScrollView>
    </View>
  );
};
export default HeaderTabs;