import React, {Component, useState} from 'react';
import {View, Text, StatusBar, SafeAreaView} from 'react-native';
import {getFontXD, HEIGHT, WIDTHXD} from '../../../Config/Functions';
import Level1 from './Tabs/Level1';

import I18n from '../../../helper/i18/i18n';

import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
const Tab = createMaterialTopTabNavigator();
import HeaderPartner from '../../../components/Header/HeaderPartner';
import SearchModal from './SearchModal';
const ListTabs = [
  {
    type: 'level1',
    value: 1,
  },
  {
    type: 'level2',
    value: 2,
  },
  {
    type: 'level3',
    value: 3,
  },
];

const MyGroup = (props) => {
  const [isModalVisible, setModalVisible] = useState(false);
  const toggleModal = () => {
    setModalVisible(!isModalVisible);
  };

  return (
    <View style={{flex: 1}}>
      <HeaderPartner
        onOpenSearch={toggleModal}
        title={'MyPartner'}
        isWhite={true}
      />
      <View style={{flex: 1, backgroundColor: 'white'}}>
        <Tab.Navigator
          initialRouteName="Tab1"
          swipeEnabled={false}
          tabBarOptions={{
            inactiveTintColor: '#929292',
            activeTintColor: '#1473E6',
            labelStyle: {fontSize: getFontXD(36)},
            style: {backgroundColor: 'white'},
          }}>
          {ListTabs.map((e) => (
            <Tab.Screen
              name={e.type}
              children={() => <Level1 type={e.value} />}
              options={{tabBarLabel: I18n.t(e.type)}}
            />
          ))}
        </Tab.Navigator>
        <SearchModal
          toggleModal={toggleModal}
          isModalVisible={isModalVisible}
        />
      </View>
    </View>
  );
};

export default MyGroup;
