import React, { Component } from "react";
import {
  StyleSheet,
  View,
  Text,
  TouchableOpacity,
  Image,
  Button,
  LogBox,
  TextInput,
  StatusBar,
  FlatList,
} from "react-native";
import Icon from "react-native-vector-icons/FontAwesome";
import Colors from "./Colors";
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,
  SCREEN_HEIGHT,
  SCREEN_WIDTH,
} from "./Constants";

export default class QuoteInstructions extends Component {
  render() {
    return (
      <View style={{ flex: 1, backgroundColor: "#FFFFFF" }}>
        {(console.disableYellowBox = true)}
        <StatusBar hidden={true} />
        <View style={{ flex: 0.9 }}>
          <View
            style={{
              width: SCREEN_WIDTH,
              height: 70,
              backgroundColor: "#F5F5F5",
              justifyContent: "center",
              marginBottom: 16,
            }}
          >
            <View style={{ flexDirection: "row" }}>
              <View>
                <TouchableOpacity
                  onPress={() => this.props.navigation.navigate("PI")}
                >
                  <Icon
                    name="arrow-left"
                    size={25}
                    style={{ marginLeft: 16, marginRight: 16 }}
                  />
                </TouchableOpacity>
              </View>
              <View>
                <Text
                  style={{
                    fontFamily: "Muli-Bold",
                    fontSize: 20,
                    marginLeft: 16,
                  }}
                >
                  A few tips for your Four Wheeler inspection.
                </Text>
              </View>
            </View>
          </View>

          <View style={{ marginLeft: 16, marginBottom: 16 }}>
            <Text style={{ fontFamily: "Muli-Regular", fontSize: 16 }}>
              This will be a quick 12 step process.Here are few tips:
            </Text>
          </View>
          <View style={{ flexDirection: "row" }}>
            <View
              style={{ flex: 0.7, marginLeft: 16, backgroundColor: "#F5F5F5" }}
            >
              <Text
                style={{
                  fontFamily: "Muli-Regular",
                  fontSize: 16,
                  marginTop: 16,
                  marginLeft: 16,
                }}
              >
                We need the following permission before you start clicking the
                images.
              </Text>
              <Text
                style={{
                  fontFamily: "Muli-Regular",
                  fontSize: 16,
                  marginLeft: 16,
                }}
              >
                {"\u2022"} Camera
              </Text>
              <Text
                style={{
                  fontFamily: "Muli-Regular",
                  fontSize: 16,
                  marginLeft: 16,
                }}
              >
                {"\u2022"} Location
              </Text>
              <Text
                style={{
                  fontFamily: "Muli-Regular",
                  fontSize: 16,
                  marginLeft: 16,
                }}
              >
                {"\u2022"} Gallery
              </Text>
              <Text
                style={{
                  fontFamily: "Muli-Regular",
                  fontSize: 16,
                  marginBottom: 16,
                  marginLeft: 16,
                }}
              >
                Don't worry - we won't peep into your phone's data!
              </Text>
            </View>
          </View>
        </View>
        <View style={{ flex: 0.1, justifyContent: "flex-end" }}>
          <View style={{ marginLeft: 16 }}>
            <TouchableOpacity>
              <View style={styles.captureImageButtonView}>
                <Text style={styles.captureImageButtonText}>
                  Let's Get Started
                </Text>
              </View>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    );
  }
}

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",
  },
});
