bestpc_mobile/src/components/buildpc/CreateBuildpc.tsx

import React, { useState } from "react";
import {
  View,
  Text,
  ScrollView,
  TouchableOpacity,
  Image,
  StyleSheet,
  Dimensions,
  TextInput,
} from "react-native";
import PopupBuildpc from "@components/buildpc/PopupBuildpc"; // Bạn cần tự tạo modal này trong React Native
import Feather from "@expo/vector-icons/Feather";
import AntDesign from "@expo/vector-icons/AntDesign";
const { width } = Dimensions.get("window");

export function CreateBuildpc() {
  const [showPopup, setShowPopup] = useState(false);

  return (
    <ScrollView style={styles.container}>
      {/* Item CPU */}
      <View style={styles.itemRow}>
        <Text style={styles.componentTitle}>CPU</Text>
        <View style={styles.productInfo}>
          <View style={styles.productLeft}>
            <View style={styles.infolinhkien}>
              <Image
                source={require("../../../assets/images/lienkien-ram.png")}
                style={styles.productImage}
                resizeMode="contain"
              />
              <Text style={styles.productName}>
                AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
              </Text>
            </View>
            <View style={styles.boxQlt}>
              <Text>Số lượng</Text>
              <TextInput
                value="111"
                style={styles.inputQl}
                keyboardType="numeric"
                placeholder="Nhập số"
              />
            </View>
            <View
              style={{
                flexDirection: "row",
                alignItems: "center",
                marginBottom: 10,
              }}
            >
              <Text style={{ marginRight: 10, fontSize: 13 }}>Giá bán:</Text>
              <Text style={styles.oldPrice}>4.700.000 Vnđ</Text>
            </View>
            <View
              style={{
                flexDirection: "row",
                alignItems: "center",
                marginBottom: 10,
              }}
            >
              <Text style={{ marginRight: 10, fontSize: 13 }}>Khuyến mãi:</Text>
              <Text style={styles.discount}>20%</Text>
            </View>
            <View
              style={{
                flexDirection: "row",
                alignItems: "center",
                marginBottom: 10,
              }}
            >
              <Text style={{ marginRight: 10, fontSize: 13 }}>Thành tiền:</Text>
              <Text style={styles.totalPrice}>4.000.000đ</Text>
            </View>
            <View style={styles.supplierSection}>
              <Text style={{ marginRight: 10, fontSize: 13 }}>
                Nhà cung cấp
              </Text>
              <Image
                source={require("../../../assets/images/logo-hacom.png")}
                style={styles.supplierLogo}
                resizeMode="contain"
              />
            </View>
          </View>
          <View style={styles.buttonGroup}>
            <TouchableOpacity style={styles.buyButton}>
              <Feather name="edit" size={24} color="#1877f2" />
            </TouchableOpacity>
            <TouchableOpacity style={styles.removeButton}>
              <AntDesign name="delete" size={24} color="#ff0000" />
            </TouchableOpacity>
          </View>
        </View>
      </View>
      {/* Thêm lựa chọn CPU */}
      <TouchableOpacity
        style={styles.addButton}
        onPress={() => setShowPopup(true)}
      >
        <Text style={styles.addButtonText}>+ Chọn thêm CPU</Text>
      </TouchableOpacity>
      {/* Tổng tiền */}
      <View style={styles.totalSection}>
        <Text style={styles.totalText}>Tổng tiền 2 sản phẩm: 8.000.000đ</Text>
        <View style={styles.totalButtons}>
          <TouchableOpacity style={styles.printButton}>
            <Text>🖨️ In đơn hàng</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.checkoutButton}>
            <Text style={styles.checkoutText}>Mua hàng tại Hacom</Text>
          </TouchableOpacity>
        </View>
      </View>
      {/* Popup */}
      {showPopup && (
        <PopupBuildpc visible={showPopup} onClose={() => setShowPopup(false)} />
      )}
    </ScrollView>
  );
}

export default CreateBuildpc;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
  },
  componentTitle: {
    fontWeight: "bold",
    fontSize: 15,
    marginBottom: 5,
  },
  itemRow: {
    paddingVertical: 12,
    borderBottomWidth: 1,
    borderColor: "#ccc",
  },

  productInfo: {
    flexDirection: "row",
    alignItems: "flex-start",
    justifyContent: "space-between",
  },
  productLeft: {
    width: width - 100,
  },
  infolinhkien: {
    flexDirection: "row",
  },
  productImage: {
    width: 60,
    height: 60,
    marginRight: 10,
    borderWidth: 1,
    borderColor: "#ccc",
  },
  productName: {
    flexShrink: 1,
  },
  inputQl: {
    borderWidth: 1,
    borderColor: "#e3e3e3",
    fontSize: 13,
    width: 64,
    height: 30,
    marginLeft: 10,
    paddingVertical: 0,
    paddingHorizontal: 6,
    borderRadius: 4,
    paddingLeft: 10,
    paddingRight: 10,
    lineHeight: 20,
    includeFontPadding: false,
  },
  boxQlt: {
    marginBottom: 15,
    marginTop: 10,
    flexDirection: "row",
    alignItems: "center",
    height: 30,
    flex: 1,
  },
  oldPrice: {},
  discount: {},
  totalPrice: {
    fontWeight: "bold",
    color: "red",
  },
  supplierSection: {
    alignItems: "center",
    flexDirection: "row",
  },
  supplierLogo: {
    width: 60,
    height: 30,
    marginBottom: 6,
  },
  buttonGroup: {
    flexDirection: "row",
    alignItems: "center",
    width: 60,
  },
  buyButton: {
    marginRight: 6,
  },
  removeButton: {
    paddingVertical: 2,
  },
  addButton: {
    marginTop: 12,
    backgroundColor: "#d4d4d4",
    borderRadius: 4,
    paddingVertical: 6,
    alignItems: "center",
  },
  addButtonText: {
    fontSize: 12,
    fontWeight: "bold",
  },
  totalSection: {
    marginTop: 24,
  },
  totalText: {
    fontSize: 18,
    fontWeight: "bold",
    color: "#dc2626",
    textAlign: "right",
  },
  totalButtons: {
    flexDirection: "row",
    justifyContent: "flex-end",
    marginTop: 12,
  },
  printButton: {
    borderWidth: 1,
    borderColor: "#b3b3b3",
    paddingHorizontal: 16,
    paddingVertical: 8,
    marginRight: 10,
    borderRadius: 4,
  },
  checkoutButton: {
    backgroundColor: "#5b21b6",
    paddingHorizontal: 16,
    paddingVertical: 8,
    borderRadius: 4,
  },
  checkoutText: {
    color: "#fff",
    fontWeight: "bold",
  },
});