water-sys/app/screens/banner/InquiryScreen.tsx

import React,{useState} from "react";
import {
  View,
  Text,
  Image,
  StyleSheet,
  TouchableOpacity,  
  TextInput,
  KeyboardAvoidingView,
  Platform,
  ScrollView
} from "react-native";
import BackIcon from "../../components/BackIcon";
import fontSize from "../../utils/fontsizeUtils";
import { LinearGradient } from "expo-linear-gradient";
import widthUtils from "../../utils/widthUtils";
import TrapezoidIcon from "../../components/TrapezoidIcon";


export const InquiryScreen = () => {
  const [searchImg, setSearchImg] = useState('');
  const updataImg = () => {
    setSearchImg("updataImg");
  };
  return (
    <KeyboardAvoidingView 
      behavior={Platform.OS === "ios" ? "padding" : "height"}
      style={styles.container}
      keyboardVerticalOffset={Platform.OS === "ios" ? 100 : 0}
    >
      <ScrollView 
        contentContainerStyle={styles.scrollContent}
        keyboardShouldPersistTaps="handled"
        showsVerticalScrollIndicator={false}
      >
        <View style={styles.productInquirySection1}>
          <LinearGradient
            colors={["#C8DFFF", "#ECF5FF"]}
            style={styles.headerGradient}
            start={{ x: 0, y: 0 }}
            end={{ x: 0, y: 1 }}
          >
            <View>
              <View style={styles.titleContainer}>
                <View style={styles.title}>
                  <BackIcon size={fontSize(24)}></BackIcon>
                </View>
                <View style={styles.titleText}>
                  <Text style={styles.titleText}>图片询盘</Text>
                </View>
              </View>

              <View style={styles.heardContainer}>
                <View>
                  <Text style={styles.heardContainer1Text}>
                    通过上传图片，{"\n"}即可获取产品报价
                  </Text>
                </View>
                <View>
                  <Text style={styles.heardContainer1Img}>
                    <Image
                      source={require("../../../assets/img/image_7a9fbefc.png")}
                      style={styles.heardContainer1Img}
                    ></Image>
                  </Text>
                </View>
              </View>
            </View>
          </LinearGradient>

          <View style={styles.productQuoteSection}>
            <View style={styles.label}>
              <View style={styles.labelItem}>
                <View style={styles.labelItemBox}>
                  <TrapezoidIcon color={"#006be5"} />
                  <Text style={styles.labelItemText}>Demander un devis</Text>
                </View>
              </View>
              <View style={styles.labelItemTow}>
                <Text style={styles.labelItemTextTow}>Devisen   cours</Text>
              </View>
              <View style={styles.labelItemThree}>
                <Text style={styles.labelItemTextThree}>Terminé</Text>
              </View>
            </View>

            {
              searchImg ? <View style={styles.container}>
              <View style={styles.cardContainerWithButtons}>
                <View style={styles.productCardContainer}>
                  <View style={styles.productCardContainer1}>
                    <Image
                      source={require("../../../assets/img/image_8f3bf967.png")}
                      style={styles.articleThumbnailContainer}
                    />
                    <View style={styles.articleTitleContainer}>
                      <Text style={styles.elegantText}>Nom d'article</Text>
                      <TextInput style={styles.articleTitleContainer1} />
                    </View>
                  </View>
                  <View style={styles.flexRowWithContent}>
                    <View style={styles.centerColumnWithText}>
                      <Text style={styles.quantityLabelTextStyle}>
                        <Text style={styles.highlightedText}>*</Text>
                        <Text>Quantité</Text>
                      </Text>
                      <TextInput style={styles.quantityContainer} />
                    </View>
                    <View style={styles.matiereContainer}>
                      <Text style={styles.quantityLabelTextStyle}>Matière</Text>
                      <TextInput style={styles.quantityContainer} />
                    </View>
                  </View>
                  <View style={styles.linkContainer}>
                    <Text style={styles.elegantText}>Lien</Text>
                    <TextInput style={styles.contentWrapper} multiline={true} />
                  </View>
                  <View style={styles.linkContainer}>
                    <Text style={styles.elegantText}>Remarque</Text>
                    <TextInput style={styles.contentWrapper} multiline={true} />
                  </View>
                </View>
                <View style={styles.buttonGroupConfirmation}>
                  <TouchableOpacity style={styles.cancelButtonStyle}>
                    <Text style={styles.cancelButtonText}>Cancel</Text>
                  </TouchableOpacity>
                  <TouchableOpacity style={styles.confirmButtonStyle}>
                    <Text style={styles.confirmButtonText}>Confirm</Text>
                  </TouchableOpacity>
                </View>
              </View>
            </View> : (

                <View style={styles.productInfoContainer}>
              <View style={styles.productImageUploadSection}>
                <View style={styles.productInfoContainer1}>
                  <Image
                    source={require("../../../assets/img/image_fac2b0a9.png")}
                    style={styles.productImageIcon}
                    resizeMode="cover"
                  />
                  <View style={styles.productQuoteContainer}>
                    <Text style={styles.productInfoHeading}>
                      Obtenir un devis de produit via une image
                    </Text>
                    <Text style={styles.productInfoMessage1}>
                      Téléchargez une image du produit, {"\n"}et nous vous
                      fournirons un devis détaillé ainsi{"\n"}que des informations
                      sur le produit.
                    </Text>
                  </View>
                </View>
                <View style={styles.photoUploadContainer}>
                  <TouchableOpacity style={styles.photoUploadContainer1} onPress={updataImg}>
                    <LinearGradient
                      colors={["#F5F9FF", "#D8E8FF", "#B9D6FF"]}
                      style={styles.gradientBackground}
                      start={{ x: 0, y: 0 }}
                      end={{ x: 0, y: 1 }}
                    >
                      <View style={styles.photoUploadPromptContainer}>
                        <Text style={styles.centerHeadingBoldWhite}>
                          Prendre une photo ou{"\n"}télécharger une image
                        </Text>
                      </View>
                    </LinearGradient>
                  </TouchableOpacity>
                </View>
              </View>
            </View>
            )
            }
          </View>
        </View>
      </ScrollView>
    </KeyboardAvoidingView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: "100%",
  },
  scrollContent: {
    flexGrow: 1,
  },
  productInquirySection1: {
    flexDirection: "column",
    alignItems: "stretch",
    backgroundColor: "#f0f0f0",
  },
  titleContainer: {
    paddingLeft: 16,
    paddingTop: 16,
    flexDirection: "row",
  },
  heardContainer: {
    paddingLeft: 16,
    paddingRight: 16,
    flexDirection: "row",
    justifyContent: "space-between",
    height: 234,
    marginTop: 50,
  },

  heardContainer1Text: {
    fontSize: 16,
    fontWeight: 400,
    color: "#000",
  },
  heardContainer1Img: {
    width: 116,
    height: 116,
  },
  title: {
    flexDirection: "row",
    alignItems: "center",
    gap: 8,
  },
  titleText: {
    flex: 1,
    fontSize: 20,
    fontWeight: 600,
    color: "#000",
    textAlign: "center",
  },
  productInquirySection: {
    flexDirection: "column",
    paddingTop: 3,
    paddingBottom: 51,
    paddingLeft: 16,
    backgroundColor: "#f0f0f0",
  },
  timeInfoContainer: {
    flexDirection: "row",
    gap: 8,
    alignItems: "center",
    justifyContent: "space-between",
    paddingLeft: 40,
  },
  timeDisplay: {
    width: 42,
    fontWeight: "600",
    fontSize: 17,
    color: "black",
    textAlign: "center",
  },
  productInquirySection2: {
    marginTop: 2,
  },
  productInquirySection3: {
    flexDirection: "row",
    justifyContent: "space-between",
    width: "100%",
  },
  imageUploadSection: {
    paddingBottom: 39,
  },
  svgContainer: {
    width: 24,
    height: 24,
    justifyContent: "center",
    alignItems: "center",
  },
  productInfoMessage: {
    paddingRight: 13,
    paddingLeft: 13,
    marginTop: 33,
    fontWeight: "400",
    fontSize: 16,
    lineHeight: 22,
    color: "black",
    textAlign: "left",
  },
  productInquiryHeading: {
    paddingBottom: 118,
    fontWeight: "600",
    fontSize: 20,
    lineHeight: 22,
    color: "black",
  },
  imageContainer: {
    width: 116,
    height: 116,
    borderWidth: 0,
  },
  statusPanel: {
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "center",
    width: "100%",
    paddingRight: 16,
    marginTop: -7,
  },
  requestQuoteSection: {
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "center",
    height: 50,
    paddingRight: 29,
    paddingLeft: 29,
    backgroundColor: "#0766e9",
  },
  centerHeadingWhite: {
    fontWeight: "600",
    fontSize: 16,
    lineHeight: 18,
    color: "white",
    textAlign: "center",
  },
  statusContainer: {
    flexDirection: "row",
    alignItems: "center",
    alignSelf: "center",
    justifyContent: "flex-end",
    minWidth: 167,
    height: 45,
    paddingRight: 20,
    paddingLeft: 20,
    marginTop: -45,
    marginLeft: -17,
    backgroundColor: "#fbfbfb",
    borderTopRightRadius: 25,
  },
  inProgressLabel: {
    marginRight: 2,
    fontWeight: "600",
    fontSize: 14,
    lineHeight: 14,
    color: "grey",
    textAlign: "center",
  },
  statusIndicator: {
    justifyContent: "center",
    maxWidth: "100%",
    height: 16,
    paddingRight: 3,
    paddingLeft: 3,
    backgroundColor: "#0766e9",
  },
  whiteTextHeading: {
    fontWeight: "600",
    fontSize: 12,
    lineHeight: 14,
    color: "white",
  },
  completionBox: {
    flexDirection: "row",
    alignItems: "center",
    alignSelf: "center",
    justifyContent: "center",
    minWidth: 139,
    height: 40,
    paddingLeft: 20,
    marginTop: -40,
    marginLeft: 259,
    backgroundColor: "#e8e8e8",
    borderTopRightRadius: 25,
  },
  completedText: {
    fontWeight: "600",
    fontSize: 14,
    color: "grey",
  },
  numberBox: {
    justifyContent: "center",
    maxWidth: "100%",
    height: 16,
    paddingRight: 3,
    paddingLeft: 3,
    marginLeft: 2,
    backgroundColor: "#0766e9",
  },
  productQuoteSection: {
    paddingRight: 16,
    paddingLeft: 16,
    marginTop: -110,
  },
  label: {
    width: "100%",
    height: 50,
    flexDirection: "row",
    justifyContent: "space-between",
    position: "relative",
  },
  labelItem: {
    width: "33%",
    height: "101%",
    zIndex: 2,
  },
  labelItemTow: {
    width: "66%",
    height: "90%",
    backgroundColor: "#fbfbfb",
    marginLeft: "-33%",
    zIndex: 1,
    position: "absolute",
    bottom: 0,
    left: "33%",
    borderTopLeftRadius: 20,
    borderTopRightRadius: 30,
    
  },
  labelItemTextTow: {
    position: "absolute",
    color: "#808080",
    fontSize: 14,
    fontWeight: "600",
    width: "50%",
    textAlign: "center",
    paddingHorizontal: 10,
    flexWrap: "wrap",
    lineHeight: 16,
    right: 0,
    top: '50%',
    transform: [{ translateY: -8 }],
  },
  labelItemThree: {
    width: "100%",
    height: "80%",
    backgroundColor: "#e8e8e8",
    marginLeft: "-66%",
    position: "absolute",
    bottom: 0,
    left: "66%",
    borderTopLeftRadius: 10,
    borderTopRightRadius: 30,
  },
  labelItemBox: {
    width: "100%",
    height: "100%",
    alignItems: "center",
    justifyContent: "center",
    position: "relative",
  },
  labelItemText: {
    position: "absolute",
    color: "white",
    fontSize: 14,
    fontWeight: "600",
    width: "100%",
    textAlign: "center",
    paddingHorizontal: 10,
    flexWrap: "wrap",
    lineHeight: 16,
  },
  productInfoContainer: {
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "center",
    backgroundColor: "#0766e9",
    borderBottomLeftRadius: 10,
    borderBottomRightRadius: 10,
  },
  productImageUploadSection: {
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "flex-start",
    maxWidth: "100%",
    height: 300,
    paddingBottom: 24,
    backgroundColor: "#0766e9",
    borderBottomLeftRadius: 10,
    borderBottomRightRadius: 10,
  },
  productInfoContainer1: {
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "flex-start",
    paddingTop: 24,
    paddingBottom: 22,
    paddingLeft: 29,
    paddingRight: 29,
  },
  productImageIcon: {
    width: 60,
    height: 60,
    borderWidth: 0,
  },
  productQuoteContainer: {
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "flex-start",
    marginTop: 15,
  },
  productInfoHeading: {
    fontWeight: "900",
    fontSize: 16,
    lineHeight: 20,
    color: "white",
  },
  productInfoMessage1: {
    marginTop: 7,
    fontWeight: "400",
    fontSize: 12,
    lineHeight: 16,
    color: "white",
    textAlign: "center",
  },
  photoUploadContainer: {
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "center",
    height: widthUtils(80, 80).height,
    paddingRight: 29,
    paddingLeft: 29,
  },
  photoUploadContainer1: {
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    borderRadius: 30,
    shadowColor: "#fd5000",
    shadowOffset: { width: 2, height: 3 },
    shadowOpacity: 0.2,
    shadowRadius: 4,
    elevation: 3,
    overflow: "hidden",
    height: "100%",
  },
  gradientBackground: {
    width: "100%",
    height: "100%",
    justifyContent: "center",
    alignItems: "center",
  },
  photoUploadPromptContainer: {
    flexDirection: "column",
    alignItems: "flex-end",
    justifyContent: "center",
    height: "100%",
    paddingRight: 20,
  },
  centerHeadingBoldWhite: {
    fontWeight: "700",
    fontSize: 16,
    lineHeight: 20,
    color: "#002FA7",
    textAlign: "right",
  },
  headerGradient: {
    paddingBottom: 20,
  },
  labelItemTextThree: {
    position: "absolute",
    color: "#808080",
    fontSize: 14,
    fontWeight: "600",
    width: "33%",
    textAlign: "center",
    paddingHorizontal: 10,
    flexWrap: "wrap",
    lineHeight: 16,
    right: 0,
    top: '50%',
    transform: [{ translateY: -8 }],
  },
  cardContainerWithButtons: {
    flexDirection: 'column',
    alignItems: 'stretch',
    justifyContent: 'center',
    paddingVertical: 20,
    paddingHorizontal: 16,
    paddingBottom: 38,
    backgroundColor: 'white',
    borderBottomLeftRadius: 10,
    borderBottomRightRadius: 10,
  },
  productCardContainer: {
    flexDirection: 'column',
    gap: 18,
    alignItems: 'stretch',
    justifyContent: 'flex-start',
    paddingTop: 26,
    paddingRight: 28,
    paddingBottom: 23,
    paddingLeft: 24,
    backgroundColor: '#f2f6ff',
  },
  productCardContainer1: {
   
    
    flexDirection: 'row',
    alignItems: 'flex-end',
    justifyContent: 'flex-start',
  },
  articleThumbnailContainer: {
    
    width: 76,
    height: 76,
    borderWidth: 0,
    borderRadius: 5,
    resizeMode: 'cover',
  },
  articleTitleContainer: {
    width: widthUtils(221, 221).width,
    marginLeft: 11,
  },
  elegantText: {
    padding: 0,
    margin: 0,
    fontFamily: 'PingFang SC',
    fontSize: 12,
    fontWeight: '500',
    color: '#676b74',
  },
  articleTitleContainer1: {
    width: '100%',
    height: 50,
    marginTop: 9,
    backgroundColor: 'white',
  },
  flexRowWithContent: {
   
    
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-start',
  },
  centerColumnWithText: {
    flexDirection: 'column',
    alignItems: 'stretch',
    justifyContent: 'center',
    width: widthUtils(152, 152).width,
  },
  quantityLabelTextStyle: {
    
    padding: 0,
    margin: 0,
    fontFamily: 'PingFang SC',
    fontSize: 12,
    fontWeight: '500',
    color: '#676b74',
  },
  highlightedText: {
    fontFamily: 'PingFang SC',
    fontSize: 12,
    fontWeight: '500',
    color: '#fe1e00',
  },
  quantityContainer: {
    
    
    height: 40,
    backgroundColor: 'white',
  },
  matiereContainer: {
    flexDirection: 'column',
    alignItems: 'stretch',
    justifyContent: 'center',
    width: widthUtils(151, 151).width,
    marginLeft: 7,
  },
  linkContainer: {
  },
  contentWrapper: {
    
    width: '100%',
    height: 70,
    backgroundColor: 'white',
  },
  buttonGroupConfirmation: {
   
    
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 26,
    marginRight: 14,
    marginLeft: 9,
  },
  cancelButtonStyle: {
    
   
    
    width: 160,
    minWidth: 160,
    height: 46,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f2f3f5',
    borderRadius: 43,
  },
  confirmButtonStyle: {
    
   
    
    width: 160,
    minWidth: 160,
    height: 46,
    marginLeft: 19,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#002fa7',
    borderRadius: 43,
  },
  cancelButtonText: {
    fontFamily: 'Source Han Sans CN',
    fontSize: 16,
    fontWeight: '500',
    lineHeight: 22,
    color: '#333333',
  },
  confirmButtonText: {
    fontFamily: 'Source Han Sans CN',
    fontSize: 16,
    fontWeight: '500',
    lineHeight: 22,
    color: 'white',
  },
});