import React, { useState } from "react";
import {
  View,
  StyleSheet,
  Image,
  Text,
  TextInput,
  TouchableOpacity,
  Dimensions,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { Picker } from "@react-native-picker/picker";
import { NavigationContainer } from "@react-navigation/native";
import { createDrawerNavigator } from "@react-navigation/drawer";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

const Header = () => {
  const [openSort, setopenSort] = useState(true);
  const [openFilter, setOpenFilter] = useState(false);
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  const toggleDrawer = () => {
    //Props to open/close the drawer
    setIsMenuOpen(!isMenuOpen);
  };

  const closeMenu = () => {
    setIsMenuOpen(false); // Đóng menu
  };

  return (
    <View>
      <View style={styles.headerTop}>
        <View style={styles.headerTopLeft}>
          <TouchableOpacity onPress={toggleDrawer} style={styles.menu}>
            <Ionicons style={styles.iconMenu} name="menu-outline" size={30} />
          </TouchableOpacity>
          <Image
            source={require("../../../assets/images/logo.png")}
            style={styles.logo}
            resizeMode="contain"
          />
        </View>

        <View style={styles.boxLocation}>
          <Ionicons style={styles.location} name="location-outline" size={34} />
          <View>
            <Text style={styles.textLocation}>Bạn đang ở</Text>

            <View style={styles.boxSort}>
              <TouchableOpacity
                style={styles.boxSortButton}
                onPress={() => setopenSort(!openSort)}
              >
                <Text style={styles.boxSortButtonActive}>Hà nội</Text>
                <Ionicons
                  style={styles.boxSortButtonIcon}
                  name="caret-down-outline"
                />
              </TouchableOpacity>
              <View
                style={
                  openSort
                    ? styles.boxSortList
                    : [styles.boxSortList, styles.boxSortListActive]
                }
              >
                <TouchableOpacity
                  style={[styles.boxSortItem, styles.boxSortItemActive]}
                >
                  <Text
                    style={[
                      styles.boxSortItemText,
                      styles.boxSortItemTextActive,
                    ]}
                  >
                    Hà nội
                  </Text>
                  <Ionicons
                    style={styles.boxSortItemTextIcon}
                    name="checkmark-outline"
                  />
                </TouchableOpacity>
                <TouchableOpacity style={styles.boxSortItem}>
                  <Text style={styles.boxSortItemText}>HCM</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.boxSortItem}>
                  <Text style={styles.boxSortItemText}>Đà nẵng</Text>
                </TouchableOpacity>
              </View>
            </View>
          </View>
        </View>
      </View>
      <View style={styles.searchContainer}>
        <View style={styles.searchBar}>
          <TextInput
            style={styles.searchInput}
            placeholder="Tìm kiếm khuyến mãi, cửa hàng, sản phẩm,..."
            placeholderTextColor="rgba(169, 169, 169, 1)"
          />
          <Ionicons style={styles.iconMenu} name="search-outline" size={19} />
        </View>
      </View>
      {isMenuOpen && (
        <View style={styles.overlay} onTouchStart={closeMenu}>
          <MainMenu closeMenu={closeMenu} />
        </View>
      )}
    </View>
  );
};

const MainMenu = ({ closeMenu }: { closeMenu: () => void }) => {
  return (
    <View style={styles.menuFixed}>
      <View style={styles.headerMenu}>
        <Text style={styles.headerMenuText}>Menu</Text>
        <TouchableOpacity onPress={closeMenu}>
          <Ionicons style={styles.closeMenu} name="close-outline" size={20} />
        </TouchableOpacity>
      </View>
      <View>
        <TouchableOpacity style={styles.itemMenu}>
          <View style={styles.textLeft}>
            <Image
              source={require("../../../assets/images/icon_buildpc.png")}
              style={styles.iconBuild}
            />
            <Text style={styles.itemText}>Build PC</Text>
          </View>
          <Ionicons name="chevron-forward-outline" size={20} />
        </TouchableOpacity>
        <TouchableOpacity style={styles.itemMenu}>
          <View style={styles.textLeft}>
            <Image
              source={require("../../../assets/images/icon_store.png")}
              style={styles.iconStore}
            />
            <Text style={styles.itemText}>Tìm người bán</Text>
          </View>
          <Ionicons name="chevron-forward-outline" size={20} />
        </TouchableOpacity>
        <TouchableOpacity style={styles.itemMenu}>
          <View style={styles.textLeft}>
            <Image
              source={require("../../../assets/images/icon_location.png")}
              style={styles.iconLocation}
            />
            <Text style={styles.itemText}>Địa chỉ sửa chữa</Text>
          </View>
          <Ionicons name="chevron-forward-outline" size={20} />
        </TouchableOpacity>
        <TouchableOpacity style={styles.itemMenu}>
          <View style={styles.textLeft}>
            <Image
              source={require("../../../assets/images/icon_question.png")}
              style={styles.iconProduct}
            />
            <Text style={styles.itemText}>Hỏi đáp</Text>
          </View>
          <Ionicons name="chevron-forward-outline" size={20} />
        </TouchableOpacity>
        <TouchableOpacity style={styles.itemMenu}>
          <View style={styles.textLeft}>
            <Image
              source={require("../../../assets/images/icon_box.png")}
              style={styles.iconBox}
            />
            <Text style={styles.itemText}>Sản phẩm đã lưu</Text>
          </View>
          <Ionicons name="chevron-forward-outline" size={20} />
        </TouchableOpacity>
        <TouchableOpacity style={styles.itemMenu}>
          <View style={styles.textLeft}>
            <Image
              source={require("../../../assets/images/icon_article.png")}
              style={styles.iconArticle}
            />
            <Text style={styles.itemText}>Tin rao vặt</Text>
          </View>
          <Ionicons name="chevron-forward-outline" size={20} />
        </TouchableOpacity>
      </View>
    </View>
  );
};

export { MainMenu };

let winWidth = Dimensions.get("window").width; //full width
let winHeight = Dimensions.get("window").height; //full height
const styles = StyleSheet.create({
  headerTop: {
    flexDirection: "row",
    alignItems: "center",
    width: winWidth,
    paddingRight: 10,
    paddingLeft: 10,
    paddingTop: 45,
    paddingBottom: 10,
    backgroundColor: "#462F91",
    justifyContent: "space-between",
  },
  headerTopLeft: {
    flexDirection: "row",
    alignItems: "center",
    gap: 5,
  },
  logo: {
    width: 99,
    height: 20,
  },
  searchContainer: {
    width: winWidth,
    paddingLeft: 10,
    paddingRight: 10,
    paddingTop: 9,
    paddingBottom: 9,
    backgroundColor: "#462F91",
  },
  searchBar: {
    borderRadius: 4,
    paddingLeft: 10,
    paddingRight: 10,
    paddingTop: 6,
    paddingBottom: 6,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    backgroundColor: "#FFFFFF",
  },
  searchInput: {
    flex: 1,
    fontSize: 12,
    fontFamily: "Roboto, -apple-system, Roboto, Helvetica, sans-serif",
    fontWeight: "500",
    color: "#000000",
    height: 32,
  },
  searchIconContainer: {
    flexDirection: "row",
    alignItems: "center",
    gap: 9,
  },
  divider: {
    borderColor: "rgba(179, 179, 179, 1)",
    borderStyle: "solid",
    borderWidth: 1,
    width: 1,
    height: 20,
  },
  iconMenu: {
    color: "#462f91",
  },
  location: {
    color: "#FFFFFF",
    width: 34,
    height: 34,
  },
  boxlocalistion: {
    height: 20,
    width: 40,
    color: "#fff",
  },
  boxLocation: {
    flexDirection: "row",
    alignItems: "center",
    gap: 5,
    color: "#FFFFFF",
  },
  textLocation: {
    color: "#FFFFFF",
    fontSize: 10,
  },
  boxSort: {
    zIndex: 1,
  },
  boxSortButton: {
    flexDirection: "row",
    alignItems: "center",
    height: 30,
  },
  boxSortButtonTextBold: {
    fontSize: 14,
    fontWeight: "bold",
  },
  boxSortButtonActive: {
    color: "#fff",
  },
  boxSortButtonIcon: {
    marginLeft: 5,
    color: "#fff",
  },
  boxSortList: {
    paddingHorizontal: 10,
    position: "absolute",
    right: 0,
    top: 40,
    display: "none",
    backgroundColor: "#fff",
    width: 100,
  },
  boxSortListActive: {
    display: "flex",
  },
  boxSortItem: {
    paddingVertical: 10,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
  },
  boxSortItemActive: {
    borderBottomColor: "#D8262F",
    borderBottomWidth: 1,
  },
  boxSortItemText: {
    fontSize: 14,
  },
  boxSortItemTextActive: {
    color: "#D8262F",
  },
  boxSortItemTextIcon: {
    color: "#D8262F",
  },
  boxFilter: {
    width: 70,
    height: 30,
    alignItems: "center",
    flexDirection: "row",
    justifyContent: "flex-end",
    borderLeftWidth: 1,
    borderLeftColor: "#e1e1e1",
  },
  menu: {
    backgroundColor: "#fff",
    width: 30,
    height: 30,
    borderRadius: 4,
    alignItems: "center",
    justifyContent: "center",
    display: "flex",
  },
  headerMenu: {
    alignItems: "center",
    justifyContent: "space-between",
    flexDirection: "row",
    padding: 10,
    backgroundColor: "#462F91",
    paddingTop: 55,
  },
  menuFixed: {
    position: "absolute",
    top: 0,
    left: 0,
    width: "85%",
    height: winHeight,
    backgroundColor: "#fff",
    zIndex: 99,
  },
  headerMenuText: {
    color: "#fff",
    fontWeight: "bold",
  },
  closeMenu: {
    backgroundColor: "#fff",
    width: 20,
    height: 20,
    color: "#000",
    borderRadius: 50,
  },
  iconBuild: {
    width: 30,
    objectFit: "contain",
  },
  iconStore: {
    width: 20,
    objectFit: "contain",
  },
  iconCart: {
    width: 20,
    objectFit: "contain",
  },
  iconProduct: {
    width: 20,
    objectFit: "contain",
  },
  iconArticle: {
    width: 20,
    objectFit: "contain",
  },
  iconLocation: {
    width: 20,
    objectFit: "contain",
  },
  iconBox: {
    width: 20,
    objectFit: "contain",
  },
  itemMenu: {
    alignItems: "center",
    flexDirection: "row",
    justifyContent: "space-between",
    gap: 10,
    marginBottom: 10,
    padding: 10,
    borderBottomWidth: 1,
    borderBottomColor: "#e1e1e1",
    height: 50,
  },
  itemText: {
    fontSize: 15,
    color: "#000",
    fontWeight: "bold",
  },
  textLeft: {
    alignItems: "center",
    gap: 10,
    flexDirection: "row",
  },
  overlay: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: "rgba(0, 0, 0, 0.5)", // Lớp nền bán trong suốt
    zIndex: 98, // Đảm bảo lớp overlay nằm dưới menu
  },
});
export default Header;
