import React, { useState } from "react";
import {
  View,
  StyleSheet,
  Image,
  Text,
  TextInput,
  TouchableOpacity,
  Dimensions,
  Platform,
} 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 = ({ toggleMenu }: { toggleMenu: () => void }) => {
  const [openSort, setopenSort] = useState(true);
  const [openFilter, setOpenFilter] = useState(false);

  return (
    <View style={styles.BoxHeader}>
      <View style={styles.headerTop}>
        <View style={styles.headerTopLeft}>
          <TouchableOpacity onPress={toggleMenu} 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>
          </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>
      <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>
  );
};

let winWidth = Dimensions.get("window").width; //full width
let winHeight = Dimensions.get("window").height; //full height
const styles = StyleSheet.create({
  BoxHeader: {
    width: winWidth,
    zIndex: 9999,
    ...Platform.select({
      web: {
        position: "fixed" as any,
        top: 0,
      },
      default: {
        position: "absolute",
        top: 0,
        left: 0,
      },
    }),
  },
  headerTop: {
    flexDirection: "row",
    alignItems: "center",
    width: winWidth,
    paddingRight: 10,
    paddingLeft: 10,
    paddingTop: 10,
    paddingBottom: 10,
    backgroundColor: "#462F91",
    justifyContent: "space-between",
  },
  headerTopLeft: {
    flexDirection: "row",
    alignItems: "center",
    gap: 5,
  },
  logo: {
    width: 99,
    height: 20,
  },
  searchContainer: {
    width: "100%",
    paddingLeft: 10,
    paddingRight: 10,
    paddingTop: 9,
    paddingBottom: 9,
    backgroundColor: "#462F91",
    position: "relative",
    zIndex: 1,
  },
  searchBar: {
    borderRadius: 4,
    paddingLeft: 10,
    paddingRight: 10,
    height: 32,
    lineHeight: 32,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    backgroundColor: "#FFFFFF",
  },
  searchInput: {
    fontSize: 12,
    fontWeight: "500",
    color: "#000000",
    height: 32,
    lineHeight: 32,
    width: winWidth - 60,
    outlineWidth: 0,
  },
  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",
    position: "relative",
  },
  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: 60,
    display: "none",
    backgroundColor: "#fff",
    width: 100,
    zIndex: 999,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.3,
    shadowRadius: 5,
  },
  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",
  },
});
export default Header;
