import React, { Component } from "react";
import { StyleSheet, View, Text, TouchableOpacity, Image, Button, LogBox, TextInput, StatusBar, FlatList, Dimensions, Alert } from "react-native";
import Icon from 'react-native-vector-icons/FontAwesome';
import Colors from './Colors';
import Orientation from 'react-native-orientation';
import Spinner from 'react-native-loading-spinner-overlay';
import { INSTRUCTIONS_URL, SELFSURVEYSERVICE_DOCUMENT_URL, AGENT_DATA } from '../Api/ApiUrls';
import { PAN_CARD, POLICE_FIR, EXTERNAL_DAMAGE, INTERNAL_DAMAGE, RC_BOOK, AADHAR_CARD, CNG, DRIVING_LICENSE, VIDEO_TITLE, SELFI_IMAGE, ODOMETER, VIDEO_URL, PRIVATE_CAR_20103, PRIVATE_CAR_20102, PRIVATE_CAR_20101, BIKE_20202, BIKE_20201, CUMMERCIAL_20302, CUMMERCIAL_20301 } from './Constants';
import SquareRadio from "./SquareRadio";
import { ScrollView } from "react-native-gesture-handler";
const initial = Orientation.getInitialOrientation();
let SCREEN_WIDTH;
let SCREEN_HEIGHT;

if (initial === 'PORTRAIT') {
  SCREEN_HEIGHT = Math.round(Dimensions.get('window').width - 40);
  SCREEN_WIDTH = Math.round(Dimensions.get('window').height);
} else {
  SCREEN_HEIGHT = Math.round(Dimensions.get('window').height);
  SCREEN_WIDTH = Math.round(Dimensions.get('window').width);
}

const car = require('./Image/car.png');

const Auto = require('./Image/Auto.png');

const Bike = require('./Image/Bike.png');

const NCB_SLABS = [{
  ncb: 0,
  name: '0%',
  id: 1,
  value: 'ZERO'
}, {
  ncb: 20,
  name: '20%',
  id: 2,
  value: 'TWENTY'
}, {
  ncb: 25,
  name: '25%',
  id: 3,
  value: 'TWENTY_FIVE'
}, {
  ncb: 35,
  name: '35%',
  id: 4,
  value: 'THIRTY_FIVE'
}, {
  ncb: 45,
  name: '45%',
  id: 5,
  value: 'FORTY_FIVE'
}, {
  ncb: 50,
  name: '50%',
  id: 6,
  value: 'FIFTY'
}];
export default class WithOutQuote extends Component {
  constructor(props) {
    super(props);
    this.state = {
      datasource: [],
      registrationNumber: "",
      showError: false,
      showErrorType: false,
      isSelected: false,
      activityIndicatorVisibility: false
    };
  }

  componentDidMount() {
    //for wite base data
    this.callApiAgentData();
  }

  async callApiAgentData() {
    try {
      this.setState({
        activityIndicatorVisibility: true
      });
      let resp = await fetch(AGENT_DATA + "?webUserId=" + this.props.screenProps.webUserId);
      let resJson = await resp.json();
      let fillteredData = [];
      var isPrivateCar = false;
      var isTwoWheeler = false;
      var isCommercialVehicle = false; //Filter Data For The Display Products

      resJson.forEach(element => {
        if (!isPrivateCar && (element.productCode == PRIVATE_CAR_20101 || element.productCode == PRIVATE_CAR_20102 || element.productCode == PRIVATE_CAR_20103)) {
          element = { ...element,
            isPrivateCar: true
          };
          fillteredData.splice(0, 0, element);
          isPrivateCar = true;
        }

        if (!isTwoWheeler && (element.productCode == BIKE_20201 || element.productCode == BIKE_20202)) {
          element = { ...element,
            isTwoWheeler: true
          };
          fillteredData.splice(1, 0, element);
          isTwoWheeler = true;
        }

        if (!isCommercialVehicle && (element.productCode == CUMMERCIAL_20301 || element.productCode == CUMMERCIAL_20302)) {
          element = { ...element,
            isCommercialVehicle: true
          };
          fillteredData.splice(2, 0, element);
          isCommercialVehicle = true;
        }
      });
      this.setState({
        datasource: fillteredData
      });
      this.setState({
        activityIndicatorVisibility: false
      });
    } catch (error) {
      Alert.alert("Could not get inspection type");
      this.setState({
        activityIndicatorVisibility: false
      });
    }
  } // Display write base data


  renderItems(datasource) {
    const renderMap = [];
    datasource !== undefined && datasource.forEach(item => {
      if (item.isPrivateCar) renderMap.push( /*#__PURE__*/React.createElement(TouchableOpacity, {
        key: item.productCode,
        onPress: () => this.setState({
          isCarFocused: true,
          isBikeFocused: false,
          isCummercialFocused: false,
          isSelected: true
        })
      }, /*#__PURE__*/React.createElement(View, {
        style: {
          width: (SCREEN_WIDTH - 64) / 3,
          height: SCREEN_HEIGHT / 8,
          borderWidth: 1,
          borderRadius: 4,
          marginLeft: 16,
          marginBottom: 16,
          borderColor: this.state.isCarFocused ? Colors.digitYellow : Colors.lightGray,
          justifyContent: 'center'
        }
      }, /*#__PURE__*/React.createElement(View, {
        style: styles.productImageView
      }, /*#__PURE__*/React.createElement(Image, {
        source: car,
        style: styles.productImage,
        resizeMethod: "auto",
        resizeMode: "contain"
      })), /*#__PURE__*/React.createElement(View, {
        style: styles.productImageView
      }, /*#__PURE__*/React.createElement(Text, {
        style: styles.productNameStyle
      }, "Car")))));
      if (item.isTwoWheeler) renderMap.push( /*#__PURE__*/React.createElement(TouchableOpacity, {
        key: item.productCode,
        onPress: () => this.setState({
          isBikeFocused: true,
          isCarFocused: false,
          isCummercialFocused: false,
          isSelected: true
        })
      }, /*#__PURE__*/React.createElement(View, {
        style: {
          width: (SCREEN_WIDTH - 64) / 3,
          height: SCREEN_HEIGHT / 8,
          borderWidth: 1,
          borderRadius: 4,
          marginLeft: 16,
          marginBottom: 16,
          borderColor: this.state.isBikeFocused ? Colors.digitYellow : Colors.lightGray,
          justifyContent: 'center'
        }
      }, /*#__PURE__*/React.createElement(View, {
        style: styles.productImageView
      }, /*#__PURE__*/React.createElement(Image, {
        source: Bike,
        style: styles.productImage,
        resizeMethod: "auto",
        resizeMode: "contain"
      })), /*#__PURE__*/React.createElement(View, {
        style: styles.productImageView
      }, /*#__PURE__*/React.createElement(Text, {
        style: styles.productNameStyle
      }, "Bike")))));
      if (item.isCommercialVehicle) renderMap.push( /*#__PURE__*/React.createElement(TouchableOpacity, {
        key: item.productCode,
        onPress: () => this.setState({
          isBikeFocused: false,
          isCarFocused: false,
          isCummercialFocused: true,
          isSelected: true
        })
      }, /*#__PURE__*/React.createElement(View, {
        style: {
          width: (SCREEN_WIDTH - 64) / 3,
          height: SCREEN_HEIGHT / 8,
          borderWidth: 1,
          borderRadius: 4,
          marginLeft: 16,
          marginBottom: 16,
          borderColor: this.state.isCummercialFocused ? Colors.digitYellow : Colors.lightGray,
          justifyContent: 'center'
        }
      }, /*#__PURE__*/React.createElement(View, {
        style: styles.productImageView
      }, /*#__PURE__*/React.createElement(Image, {
        source: Auto,
        style: styles.productImage,
        resizeMethod: "auto",
        resizeMode: "contain"
      })), /*#__PURE__*/React.createElement(View, {
        style: styles.productImageView
      }, /*#__PURE__*/React.createElement(Text, {
        style: styles.productNameStyle
      }, "Commercial")))));
    });
    return /*#__PURE__*/React.createElement(View, {
      style: {
        flex: 1,
        flexDirection: 'row'
      }
    }, renderMap);
  } //validate


  validate() {
    if (this.state.skipdata == ODOMETER) {
      if (this.state.odometerReading != '') {
        this.setState({
          isDisplayInstruction: false,
          showError: false,
          odometerReading: ''
        });
      } else {
        this.setState({
          isDisplayInstruction: true,
          showError: true
        });
      }
    } else {
      this.setState({
        isDisplayInstruction: false
      });
    }

    if (this.state.isSelected === true) {
      this.setState({
        showErrorType: false
      });
    } else {
      this.setState({
        showErrorType: true
      });
      return;
    }

    if (this.state.registrationNumber.trim().length == 0) {
      this.setState({
        showError: true
      });
      return;
    } else {
      this.setState({
        showError: false
      });
    }

    this.props.navigation.navigate("DocumentCollection");
  } //Error Text


  showErrorText() {
    if (this.state.showError) {
      return /*#__PURE__*/React.createElement(Text, {
        style: {
          color: 'red',
          marginLeft: 4,
          fontFamily: 'Muli-Regular',
          marginLeft: 16
        }
      }, "Enter Vehicle Registration Number");
    }
  } //Error Text


  showErrorTextVechicleType() {
    if (this.state.showErrorType) {
      return /*#__PURE__*/React.createElement(Text, {
        style: {
          color: 'red',
          marginLeft: 4,
          fontFamily: 'Muli-Regular',
          marginLeft: 16
        }
      }, "Enter Vehicle Type");
    }
  }

  render() {
    SCREEN_HEIGHT = Math.round(Dimensions.get('window').height);
    SCREEN_WIDTH = Math.round(Dimensions.get('window').width);
    const dataSource = this.state.datasource;
    return /*#__PURE__*/React.createElement(View, {
      style: {
        flex: 1,
        backgroundColor: '#FFFFFF'
      }
    }, /*#__PURE__*/React.createElement(StatusBar, {
      hidden: true
    }), /*#__PURE__*/React.createElement(ScrollView, null, /*#__PURE__*/React.createElement(View, {
      style: {
        width: SCREEN_WIDTH,
        height: 70,
        backgroundColor: '#F5F5F5',
        marginBottom: 16,
        flexDirection: 'row'
      }
    }, /*#__PURE__*/React.createElement(View, {
      style: {
        alignSelf: "center"
      }
    }, /*#__PURE__*/React.createElement(TouchableOpacity, {
      onPress: () => this.props.navigation.navigate("PI")
    }, /*#__PURE__*/React.createElement(Icon, {
      name: "arrow-left",
      size: 25,
      style: {
        marginLeft: 16,
        marginRight: 16
      }
    }))), /*#__PURE__*/React.createElement(View, {
      style: {
        alignSelf: "center"
      }
    }, /*#__PURE__*/React.createElement(Text, {
      style: {
        fontFamily: 'Muli-Bold',
        fontSize: 22,
        marginLeft: 16
      }
    }, "Pre Inspection"))), /*#__PURE__*/React.createElement(View, {
      style: {
        flex: 0.9
      }
    }, /*#__PURE__*/React.createElement(Text, {
      style: {
        marginLeft: 16,
        fontSize: 16,
        fontFamily: 'Muli-Bold',
        marginBottom: 4
      }
    }, "Choose Vechicle Type "), /*#__PURE__*/React.createElement(View, {
      style: {
        marginTop: 16,
        flexDirection: 'column'
      }
    }, this.renderItems(this.state.datasource), this.showErrorTextVechicleType()), /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Text, {
      style: {
        marginLeft: 16,
        fontSize: 16,
        fontFamily: 'Muli-Bold',
        marginBottom: 4
      }
    }, "Vechicle Registration Number "), /*#__PURE__*/React.createElement(TextInput, {
      style: {
        width: SCREEN_WIDTH - 32,
        height: 50,
        borderColor: this.state.isFocused ? Colors.digitYellow : Colors.lightGray,
        borderWidth: 1,
        marginLeft: 16,
        borderRadius: 4,
        fontFamily: 'Muli-Regular',
        fontSize: 16
      },
      onChangeText: registrationNumber => this.setState({
        registrationNumber
      }),
      placeholder: "Type Registration Number",
      autoCapitalize: "characters" // onFocus={this.setState({ isFocused: true })}
      // onBlur={this.setState({ isFocused: false })}

    }), this.showErrorText()), /*#__PURE__*/React.createElement(View, {
      style: {
        marginTop: 22
      }
    }, /*#__PURE__*/React.createElement(TouchableOpacity, {
      onPress: () => this.props.navigation.navigate("PI")
    }, /*#__PURE__*/React.createElement(Text, {
      style: {
        marginLeft: 16,
        fontSize: 16,
        fontFamily: 'Muli-Bold',
        color: Colors.digitYellow
      }
    }, "Search with Quote Number"))), /*#__PURE__*/React.createElement(View, {
      style: {
        marginTop: 44,
        marginLeft: 16,
        marginRight: 16
      }
    }, /*#__PURE__*/React.createElement(Text, {
      style: {
        fontSize: 16,
        fontFamily: "Muli-Bold",
        marginBottom: 8
      }
    }, "Select NCB percentage"), /*#__PURE__*/React.createElement(SquareRadio, {
      gap: 16,
      data: NCB_SLABS,
      numberOfRecord: 3,
      isFullValue: true,
      selected: value => {
        this.setState({
          ncbSelected: value.id
        });
      },
      selectedvalue: this.state.ncbSelected,
      labelStyle: styles.squareRadioStyle
    }))), /*#__PURE__*/React.createElement(View, {
      style: {
        flex: 0.1,
        marginTop: 40,
        marginBottom: 8
      }
    }, /*#__PURE__*/React.createElement(View, {
      style: {
        marginLeft: 16
      }
    }, /*#__PURE__*/React.createElement(TouchableOpacity, {
      onPress: () => this.validate()
    }, /*#__PURE__*/React.createElement(View, {
      style: styles.captureImageButtonView
    }, /*#__PURE__*/React.createElement(Text, {
      style: styles.captureImageButtonText
    }, "Continue"))))), this.displaySpinner()));
  } //Display Spinner


  displaySpinner() {
    if (this.state.activityIndicatorVisibility) {
      return /*#__PURE__*/React.createElement(View, {
        style: styles.splashView
      }, /*#__PURE__*/React.createElement(Spinner, {
        visible: true,
        textContent: 'Loading...',
        color: Colors.digitYellow
      }));
    } else {
      return null;
    }
  }

}
const styles = StyleSheet.create({
  main: {
    flex: 1 // backgroundColor: Colors.white,

  },
  captureImageButtonView: {
    height: 48,
    borderRadius: 4,
    backgroundColor: Colors.digitYellow,
    marginTop: 2,
    flexDirection: 'row',
    justifyContent: 'center',
    marginRight: 16
  },
  captureImageButtonText: {
    fontSize: 16,
    fontFamily: 'Muli-Black',
    alignSelf: 'center'
  },
  productImageView: {
    flexDirection: 'row',
    justifyContent: 'center'
  },
  productImage: {
    width: 50,
    height: 50,
    marginTop: 16,
    flexDirection: 'row',
    justifyContent: 'space-around',
    marginLeft: 16,
    marginRight: 16
  },
  squareRadioStyle: {
    fontSize: 14,
    color: Colors.darkBlack
  }
});
//# sourceMappingURL=WithOutQuote.js.map