import React from "react";
import {
  View,
  Text,
  ImageBackground,
  TouchableOpacity,
  FlatList,
  ScrollView,
  TouchableWithoutFeedback,
  Keyboard,
  SafeAreaView,
  Image,
} from "react-native";
import HeaderCus from "../home/header";
import R from "../../assets/R";
import I18n from "../../helper/i18/i18n";
import ItemGrid from "./item";
import styles from "./style";
import { useNavigation } from "@react-navigation/native";
import * as SCREENNAME from "../../routers/ScreenNames";
const HomeView = (props) => {
  const {
    menuDataStudy,
    menuDataIndividual,
    menuDataOnlineSer,
    selectedMenuItem,
    searchText,
    userProfile,
    onMenuItemPress,
    onSearchChange,
  } = props;
  const ArrowRightIcon = R.images.icArrowRight;
  const navigate = useNavigation();
  const renderMenuItem = ({ item }) => {
    return <ItemGrid item={item} onPress={() => onMenuItemPress(item)} />;
  };

  return (
    <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
      <SafeAreaView style={{ flex: 1 }}>

        <View style={styles.container_body}>
          <ImageBackground
            source={R.images.igBackgroundSlider}
            style={styles.background_header}
          >
            <HeaderCus
              pathLogo={R.images.igLogo}
              width={75}
              height={36}
              textInput={R.colors.white}
              backgroundInput={R.colors.backgroundInputSearch}
              textLabel={I18n.t("Search")}
              textColorLabel={R.colors.white}
            />

            <View style={styles.profile_card}>
              <View style={styles.profile_left}>
                <View style={styles.avatar}>
                  {userProfile?.avatar ? (
                    <Image
                      source={{ uri: userProfile.avatar }}
                      style={styles.avatar_image}
                      resizeMode="cover"
                    />
                  ) : (
                    <View style={styles.avatar_placeholder}>
                      <Text style={styles.avatar_text}>
                        {userProfile?.name?.charAt(0)}
                      </Text>
                    </View>
                  )}
                </View>
                <View style={styles.information}>
                  <Text
                    style={styles.text_card_info}
                    numberOfLines={1}
                    ellipsizeMode="tail"
                  >
                    {userProfile?.name}
                  </Text>
                  <Text
                    style={styles.text_card_info}
                    numberOfLines={1}
                    ellipsizeMode="tail"
                  >
                    {userProfile?.phone}
                  </Text>
                </View>
              </View>

              <TouchableOpacity style={styles.profile_btn} onPress={() => navigate.navigate(SCREENNAME.PROFILE)}>
                <Text style={styles.btn_text}>Hồ sơ cá nhân</Text>
                <ArrowRightIcon
                  width={5}
                  height={10}
                  fill={R.colors.txtMain}
                  style={styles.icon}
                />
              </TouchableOpacity>
            </View>
          </ImageBackground>
          <ScrollView
            showsVerticalScrollIndicator={false}
            style={styles.scroll}>
            <View style={styles.menu_container}>
              <Text style={styles.menu_title}>Học tập</Text>
              <FlatList
                data={menuDataStudy}
                renderItem={renderMenuItem}
                numColumns={3}
                keyExtractor={(item) => item.id.toString()}
                scrollEnabled={false}
                columnWrapperStyle={styles.row}
              />
            </View>
            <View style={styles.menu_container}>
              <Text style={styles.menu_title}>Cá nhân</Text>
              <FlatList
                data={menuDataIndividual}
                renderItem={renderMenuItem}
                numColumns={3}
                keyExtractor={(item) => item.id.toString()}
                scrollEnabled={false}
                columnWrapperStyle={styles.row}
              />
            </View>
            <View style={styles.menu_container}>
              <Text style={styles.menu_title}>Dịch vụ trực tuyến</Text>
              <FlatList
                data={menuDataOnlineSer}
                renderItem={renderMenuItem}
                numColumns={3}
                keyExtractor={(item) => item.id.toString()}
                scrollEnabled={false}
                columnWrapperStyle={styles.row}
              />
            </View>
          </ScrollView>
        </View>
      </SafeAreaView>
    </TouchableWithoutFeedback>
  );
};

export default HomeView;

