import React,{useState} from "react";
import {
  View,
  Text,
  Image,
  StyleSheet,
  TouchableOpacity,  
  TextInput,
  KeyboardAvoidingView,
  Platform,
  ScrollView,
  SafeAreaView,
  StatusBar
} 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";
import { useNavigation } from "@react-navigation/native";

export const InquiryScreen = () => {
  const [searchImg, setSearchImg] = useState('');
  const navigation = useNavigation();
  
  const updataImg = () => {
    setSearchImg("updataImg");
  };
  
  return (
    <SafeAreaView style={styles.safeArea}>
      <StatusBar barStyle="dark-content" backgroundColor="#C8DFFF" />
      <KeyboardAvoidingView 
        behavior={Platform.OS === "ios" ? "padding" : "height"}
        style={styles.keyboardAvoidingContainer}
        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}>
                  <TouchableOpacity 
                    style={styles.backButton}
                    onPress={() => navigation.goBack()}
                  >
                    <BackIcon size={fontSize(24)} />
                  </TouchableOpacity>
                  <View style={styles.titleTextContainer}>
                    <Text style={styles.titleText}>图片询盘</Text>
                  </View>
                  <View style={styles.placeholder} />
                </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}
                      />
                    </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}>请求报价</Text>
                  </View>
                </View>
                <View style={styles.labelItemTow}>
                  <Text style={styles.labelItemTextTow}>进行中</Text>
                </View>
                <View style={styles.labelItemThree}>
                  <Text style={styles.labelItemTextThree}>已完成</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}>商品名称</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>数量</Text>
                        </Text>
                        <TextInput style={styles.quantityContainer} />
                      </View>
                      <View style={styles.matiereContainer}>
                        <Text style={styles.quantityLabelTextStyle}>材质</Text>
                        <TextInput style={styles.quantityContainer} />
                      </View>
                    </View>
                    <View style={styles.linkContainer}>
                      <Text style={styles.elegantText}>链接</Text>
                      <TextInput style={styles.contentWrapper} multiline={true} />
                    </View>
                    <View style={styles.linkContainer}>
                      <Text style={styles.elegantText}>备注</Text>
                      <TextInput style={styles.contentWrapper} multiline={true} />
                    </View>
                  </View>
                  <View style={styles.buttonGroupConfirmation}>
                    <TouchableOpacity 
                      style={styles.cancelButtonStyle}
                      onPress={() => setSearchImg('')}
                    >
                      <Text style={styles.cancelButtonText}>取消</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.confirmButtonStyle}>
                      <Text style={styles.confirmButtonText}>确认</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}>
                        通过图片获取产品报价
                      </Text>
                      <Text style={styles.productInfoMessage1}>
                        上传产品图片，{"\n"}我们将为您提供详细报价{"\n"}和产品信息。
                      </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}>
                            拍照或{"\n"}上传图片
                          </Text>
                        </View>
                      </LinearGradient>
                    </TouchableOpacity>
                  </View>
                </View>
              </View>
              )
              }
            </View>
          </View>
        </ScrollView>
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: '#C8DFFF',
  },
  keyboardAvoidingContainer: {
    flex: 1,
    width: "100%",
  },
  container: {
    flex: 1,
    width: "100%",
  },
  scrollContent: {
    flexGrow: 1,
  },
  productInquirySection1: {
    flexDirection: "column",
    alignItems: "stretch",
    backgroundColor: "#f0f0f0",
  },
  titleContainer: {
    paddingHorizontal: 16,
    paddingTop: 16,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
  },
  backButton: {
    width: widthUtils(24, 24).width,
  },
  titleTextContainer: {
    flex: 1,
    alignItems: "center",
  },
  titleText: {
    fontSize: fontSize(18),
    fontWeight: "600",
    textAlign: "center",
  },
  placeholder: {
    width: widthUtils(24, 24).width,
    opacity: 0,
  },
  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,
  },
  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',
  },
});