import React, { useState } from "react";
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  ScrollView,
  Image,
  StyleSheet,
  Dimensions,
} 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 StoreList from "@components/shop/StoreList";
import ReviewModal from "@components/product/FormReview";
import ListShowroom from "@components/shop/ListShowroom";
import ListReview from "@components/shop/ListReview";
import FormStore from "@components/shop/FormStore";

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

export default function HomeShop() {
  const navigation = useNavigation<NavigationProp<any>>();
  const [showReviewModal, setShowReviewModal] = useState(false);
  const [showListShowroom, setshowListShowroom] = useState(false);
  const [onShowListReviews, setshowListReview] = useState(false);
  const [onShowFormStore, setFormStore] = useState(false);

  return (
    <AppLayout activeTab="homeshop">
      <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}>Tìm người bán</Text>
            </View>
          </View>

          <View style={styles.boxBackground}>
            <Text style={{ fontSize: 16, fontWeight: "bold" }}>
              Danh sách cửa hàng
            </Text>
            <View style={styles.boxFilter}>
              <View style={styles.boxInput}>
                <Ionicons
                  name="search"
                  size={18}
                  color="black"
                  style={styles.iconSearch}
                />
                <TextInput
                  style={styles.input}
                  placeholder="Tìm kiếm cửa hàng"
                />
              </View>
              <TouchableOpacity style={styles.btnFilter}>
                <Feather name="filter" size={24} color="black" />
                <Text>lọc</Text>
              </TouchableOpacity>
            </View>
            <View style={styles.listButton}>
              <TouchableOpacity style={styles.btnSortActive}>
                <Text style={styles.textActive}>Gần tôi nhất</Text>
              </TouchableOpacity>
              <TouchableOpacity style={styles.btnSort}>
                <Text>Đánh giá tốt nhất</Text>
              </TouchableOpacity>
              <TouchableOpacity style={styles.btnSort}>
                <Text>Đã xem</Text>
              </TouchableOpacity>
            </View>
            {/* list btn */}
            <View style={styles.listShop}>
              <StoreList
                onShowReview={() => setShowReviewModal(true)}
                onShowListShowroom={() => setshowListShowroom(true)}
                onShowListReview={() => setshowListReview(true)}
              />
            </View>
            {/* list shop */}
          </View>
          {/* background white */}

          <TouchableOpacity
            style={styles.btnAddShop}
            onPress={() => setFormStore(true)}
          >
            <Text style={styles.textBtn}>Giới thiệu cửa hàng mới</Text>
            <Image
              source={require("../../../assets/images/icon_add_store.png")}
              style={styles.iconAddShop}
            />
          </TouchableOpacity>
          {/* button new shop */}

          <ReviewModal
            visible={showReviewModal}
            onClose={() => setShowReviewModal(false)}
          />
          <ListShowroom
            visible={showListShowroom}
            onClose={() => setshowListShowroom(false)}
          />
          <ListReview
            visible={onShowListReviews}
            onClose={() => setshowListReview(false)}
          />
          <FormStore
            visible={onShowFormStore}
            onClose={() => setFormStore(false)}
          />
        </View>
      </ScrollView>
    </AppLayout>
  );
}

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 10,
    backgroundColor: "#f4f4f4",
  },
  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",
  },
  boxBackground: {
    padding: 10,
    backgroundColor: "#fff",
    borderRadius: "4px",
    marginBottom: 10,
  },
  boxInput: {
    width: width - 100,
    flexDirection: "row",
    alignItems: "center",
    borderWidth: 1,
    borderColor: "#462f91",
    borderRadius: "4px",
    height: 36,
    lineHeight: 36,
  },
  iconSearch: {
    width: 24,
    paddingLeft: 10,
  },
  input: {
    width: width - 70,
    height: "100%",
    outlineWidth: 0,
    padding: 10,
  },
  boxFilter: { marginTop: 10, flexDirection: "row", alignItems: "center" },
  btnFilter: {
    flexDirection: "row",
    alignItems: "center",
    marginLeft: 10,
  },
  listButton: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    marginTop: 10,
  },
  btnSort: {
    padding: 10,
    paddingLeft: 20,
    paddingRight: 20,
    marginRight: 10,
    borderWidth: 1,
    borderColor: "#cacaca",
    borderRadius: 4,
    fontSize: 13,
    fontWeight: 500,
  },
  btnSortActive: {
    padding: 10,
    paddingLeft: 20,
    paddingRight: 20,
    marginRight: 10,
    backgroundColor: "#462f91",
    borderRadius: 4,
  },
  textActive: {
    color: "#fff",
  },
  listShop: {},
  btnAddShop: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    padding: 10,
    backgroundColor: "#fff",
    borderRadius: 5,
    marginTop: 10,
    marginBottom: 10,
  },
  textBtn: {
    fontSize: 13,
    color: "#462f91",
    fontWeight: 700,
  },
  iconAddShop: {},
});
