import React from "react";
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  ScrollView,
  StyleSheet,
  Dimensions,
} from "react-native";
import { globalStyles } from "styles/globalStyles";
import { useNavigation, NavigationProp } from "@react-navigation/native";
import AppLayout from "@layouts/AppLayout";
import { Ionicons } from "@expo/vector-icons";
import ImageGallery from "@components/buildpc/ImageGallery";
import Footer from "@components/footer/Footer";
import ProvidersList from "@components/buildpc/ProvidersList";
import ProductSpecs from "@components/buildpc/ProductSpecs";
import ReviewList from "@components/buildpc/ReviewList";

const stars = [5, 4, 3, 2, 1];

export function BuildpcDeail() {
  const navigation = useNavigation<NavigationProp<any>>();

  return (
    <AppLayout activeTab="buildpcdetail">
      <ScrollView>
        <View style={styles.container}>
          {/* Breadcrumb */}
          <View style={globalStyles.breadcrumb}>
            <TouchableOpacity
              style={globalStyles.breadcrumbItem}
              onPress={() => navigation.navigate("homepage" as never)}
            >
              <Ionicons name="home-outline" size={20} color="#637381" />
            </TouchableOpacity>
            <Ionicons name="chevron-forward-outline" size={14} color="#999" />
            <Text style={[globalStyles.breadcrumbText, { fontWeight: "600" }]}>
              Màn hình máy tính
            </Text>
          </View>
          <View
            style={{
              padding: 10,
              backgroundColor: "#fff",
              marginTop: 5,
            }}
          >
            <ImageGallery />

            <View style={{ marginTop: 10 }}>
              <View
                style={{
                  flexDirection: "row",
                  alignItems: "center",
                  justifyContent: "center",
                  marginBottom: 10,
                }}
              >
                <Text style={{ marginRight: 5, fontWeight: 700 }}>
                  Nguời dùng đánh giá
                </Text>
                <Text>(40 ratings, 4.9)</Text>
              </View>
              {stars.map((star) => (
                <View key={star} style={styles.row}>
                  <Text style={styles.starLabel}>{star} sao</Text>
                  <View style={styles.barBackground}>
                    <View style={[styles.barFill, { width: "90%" }]} />
                  </View>
                  <Text style={styles.percent}>90%</Text>
                </View>
              ))}
            </View>
          </View>
          {/* nhà cung cấp */}
          <ProvidersList />
          {/* thông số kỹ thuật */}
          <ProductSpecs />
          {/* đánh giá  */}
          <ReviewList />
        </View>
      </ScrollView>
    </AppLayout>
  );
}

export default BuildpcDeail;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingHorizontal: 10,
    backgroundColor: "#efefef",
    paddingBottom: 10,
  },
  row: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 8,
  },
  starLabel: {
    width: 50,
    fontSize: 14,
    color: "#1877f2",
  },
  barBackground: {
    flex: 1,
    height: 8,
    backgroundColor: "#eee",
    borderRadius: 4,
    marginHorizontal: 8,
  },
  barFill: {
    height: 8,
    backgroundColor: "#ff960b",
  },
  percent: {
    width: 40,
    fontSize: 12,
    textAlign: "right",
    color: "#1877f2",
  },
});
