import React, { useState } from "react";
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  ScrollView,
  Image,
  StyleSheet,
  Dimensions,
  ImageBackground,
} from "react-native";
import { useNavigation, NavigationProp } from "@react-navigation/native";
import AppLayout from "@layouts/AppLayout";
import { Ionicons } from "@expo/vector-icons";
import Feather from "@expo/vector-icons/Feather";
import CategoryFilters from "@components/repair/CategoryFilters";
import LocationFilters from "@components/repair/LocationFilters";
import ServiceProviderList from "@components/repair/ServiceProviderList";
import ContactForm from "@components/repair/ContactForm";

const { width } = Dimensions.get("window");

export default function HomeRepairAddress() {
  const navigation = useNavigation<NavigationProp<any>>();
  return (
    <AppLayout activeTab="repairaddress">
      <ScrollView>
        <View style={styles.container}>
          {/* Breadcrumb */}
          <View style={styles.breadcrumb}>
            <View style={styles.breadcrumbItem}>
              <TouchableOpacity>
                <Ionicons
                  name="home"
                  size={16}
                  color="#637381"
                  style={styles.icon}
                />
              </TouchableOpacity>
              <Text style={styles.angle}>›</Text>
            </View>
            <View style={styles.breadcrumbItem}>
              <Text style={styles.text}>Địa chỉ sửa chữa</Text>
            </View>
          </View>

          <ImageBackground
            source={require("../../../assets/images/backgroundSearch.png")}
            style={styles.bgSearch}
            resizeMode="cover"
          >
            <Text style={styles.titleSearch}>
              Tìm địa chỉ sửa chữa máy tính, điện thoại
            </Text>
            <View style={styles.flexSearch}>
              <View style={styles.searchBox}>
                <TextInput
                  style={styles.input}
                  placeholder="Nhập địa chỉ của bạn để tìm địa chỉ.."
                />
                <Ionicons
                  name="search"
                  size={18}
                  color="black"
                  style={styles.iconSearch}
                />
              </View>
              <TouchableOpacity style={styles.btnFilter}>
                <Feather
                  name="filter"
                  size={24}
                  color="black"
                  style={{ marginTop: 3 }}
                />
              </TouchableOpacity>
            </View>
            <Text style={styles.noteSearch}>
              BestPC tổng hợp các địa chỉ sửa chữa máy tính, linh phụ kiện,
              thiết bị điện tử,... khắp nơi tại Việt Nam. Nhằm giúp bạn tìm được
              địa chỉ uy tín để sửa chữa
            </Text>
          </ImageBackground>
          {/* search */}

          <CategoryFilters />
          {/* tim theo nhu cau */}
          <LocationFilters />
          {/* tìm theo tỉnh thành */}

          <ServiceProviderList />
          {/* địa chỉ nổi bật */}

          <ContactForm />
          {/* form liên hệ */}
        </View>
      </ScrollView>
    </AppLayout>
  );
}

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 10,
    backgroundColor: "#fff",
  },
  breadcrumb: {
    flexDirection: "row",
    alignItems: "center",
    paddingVertical: 12,
    flexWrap: "wrap",
  },
  breadcrumbItem: {
    flexDirection: "row",
    alignItems: "center",
    marginRight: 8,
  },
  text: {
    color: "#000",
  },
  icon: {
    marginRight: 5,
  },
  angle: {
    marginLeft: 12,
    color: "#888",
  },
  searchBox: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    backgroundColor: "white",
    borderRadius: 4,
    paddingHorizontal: 10,
    gap: 20,
    width: width - 90,
  },
  flexSearch: {
    flexDirection: "row",
    alignItems: "center",
    width: "100%",
  },
  btnFilter: {
    width: 40,
    height: 35,
    backgroundColor: "#fff",
    borderRadius: 8,
    marginLeft: 10,
    textAlign: "center",
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    lineHeight: 35,
  },
  placeholder: {
    fontSize: 12,
    fontWeight: "500",
    color: "rgba(169, 169, 169, 1)",
    fontFamily: "Roboto",
    lineHeight: 21,
  },
  rightSection: {
    flexDirection: "row",
    alignItems: "center",
    gap: 9,
  },
  divider: {
    width: 1,
    height: 20,
    backgroundColor: "rgba(179, 179, 179, 1)",
  },
  searchIcon: {
    width: 16,
    height: 16,
    resizeMode: "contain",
  },
  bgSearch: {
    width: "100%",
    padding: 10,
    paddingTop: 20,
    paddingBottom: 20,
  },
  titleSearch: {
    fontSize: 18,
    textAlign: "center",
    color: "#fff",
    fontWeight: 700,
    paddingBottom: 7,
  },
  noteSearch: {
    textAlign: "center",
    color: "#fff",
    paddingTop: 7,
  },
  iconSearch: {
    width: 24,
    paddingLeft: 10,
  },
  input: {
    width: width - 14,
    outlineWidth: 0,
    height: 35,
  },
});
