import React, { Component } from "react";
import * as colors from "../assets/css/Colors";
import {
  StyleSheet,
  Text,
  View,
  Image,
  FlatList,
  TouchableOpacity,
  Alert,
} from "react-native";
import Moment from "moment";
import { CommonActions } from "@react-navigation/native";
import FontAwesome from "react-native-vector-icons/FontAwesome";
import {
  Container,
  Header,
  Content,
  Left,
  Body,
  Right,
  Title,
  Button,
  Icon,
  Row,
  Col,
  Card,
  CardItem,
  Thumbnail,
  Form,
  Textarea,
  Footer,
} from "native-base";
import {
  doctor_image,
  create_booking,
  api_url,
  font_title,
  font_description,
  check_available_timing,
  api_url1,
} from "../config/Constants";
import QB from "quickblox-react-native-sdk";
import { Loader } from "../components/GeneralComponents";
import DateTimePicker from "react-native-modal-datetime-picker";
import axios from "axios";
import { connect } from "react-redux";
import RazorpayCheckout from "react-native-razorpay";
import { Input } from "react-native-elements";
import back from "../assets/icons/back1.png";
import time from "../assets/icons/time.png";
export default class CreateAppointment extends Component {
  constructor(props) {
    super(props);
    this.handleBackButtonClick = this.handleBackButtonClick.bind(this);
    this.state = {
      description: "",
      title: "",
      deliveryDatePickerVisible: false,
      delivery_date: "",
      delivery_time: "",
      start_time: "",
      doctor_id: this.props.route.params.id,
      type: this.props.route.params.type,
      price_per_conversation: this.props.route.params.price_per_conversation,
      isLoding: false,
    };
  }

  handleBackButtonClick = () => {
    this.props.navigation.goBack(null);
  };

  create_booking = async () => {
    this.setState({ isLoding: true });
    await axios({
      method: "post",
      url: `${api_url1}/doctor_booking/`,
      data: {
        // patient_id: global.id,
        doctor_id: this.state.doctor_id,
        start_time: this.state.start_time,
        // payment_mode:2,
        title: this.state.title,
        description: this.state.description,
        // total_amount: this.state.price_per_conversation,
        // booking_type: this.state.type },
        appointmentMode: "online",
      },
    })
      .then(async (response) => {
        this.setState({ isLoding: false });
        if (response.data.status == 0) {
          alert(response.data.message);
        } else {
          this.setState({ title: "", description: "", start_time: "" });
        }

        if (response.data.status == 1) {
          await Alert.alert(
            "Success",
            "Your order has been successfully placed.",
            [{ text: "OK", onPress: () => this.my_orders() }],
            { cancelable: false }
          );
        }
      })
      .catch((error) => {
        alert("something went wrong");
        this.setState({ isLoding: false });
      });
  };

  check_timing = async () => {
    this.setState({ isLoding: true });
    await axios({
      method: "post",
      url: api_url + check_available_timing,
      data: {
        doctor_id: this.state.doctor_id,
        start_time: this.state.start_time,
        booking_type: this.state.type,
      },
    })
      .then(async (response) => {
        this.setState({ isLoding: false });
        if (response.data.status == 0) {
          alert(response.data.message);
        } else {
          this.make_payment();
        }
      })
      .catch((error) => {
        alert("something went wrong");
        this.setState({ isLoding: false });
      });
  };

  check_validation = async () => {
    // if(this.state.title == ""){
    //   alert('Please write title');
    // }else if(this.state.description == ""){
    //   alert('Please write description');
    // }else if(this.state.start_time == ""){
    //   alert('Please choose booking time');
    // }else{
    //   this.check_timing();
    // }
    await axios.post(
      `${api_url1}/doctor_booking/`,

      {
        doctor: this.state.doctor_id,
        //  this.state.doctor_id,
        // doctor: this.state.phone_number,
        description: this.state.description,
        // this.state.description,
        title: this.state.title,
        //  this.state.password,
        appointmentTime: this.state.start_time,
        appointmentMode: "online",
        //"2021-12-10T08:40:08.675+00:00",
        // this.state.start_time,
        // Authorization: `Bearer ${global.fcm_token}`,
      },
      { headers: { Authorization: `Bearer ${global.fcm_token}` } }
    );
    // .then((res) => console.log(res.data));
    alert("Appointment fixed");
    this.props.navigation.navigate("Home");
  };

  make_payment = () => {
    var options = {
      currency: global.currency_short_code,
      key: global.razorpay_key,
      amount: this.state.price_per_conversation * 100,
      name: global.application_name,
      prefill: {
        email: global.email,
        contact: global.phone_number,
        name: global.customer_name,
      },
      theme: { color: colors.theme_fg },
    };
    RazorpayCheckout.open(options)
      .then(() => {
        this.create_booking();
      })
      .catch((error) => {
        alert("Your transaction declined");
      });
  };

  my_orders = () => {
    this.props.navigation.navigate("MyOrders");
  };

  showDeliveryDatePicker = () => {
    this.setState({ deliveryDatePickerVisible: true });
  };

  hideDeliveryDatePicker = () => {
    this.setState({ deliveryDatePickerVisible: false });
  };

  handleDeliveryDatePicked = async (date) => {
    var d = new Date(date);
    let delivery_date =
      d.getFullYear() +
      "-" +
      ("0" + (d.getMonth() + 1)).slice(-2) +
      "-" +
      d.getDate();
    // 2021-12-10T08:40:08.675+00:00
    let hr = d.getHours();
    let min = d.getMinutes();
    if (min < 10) {
      min = "0" + min;
    }
    let ampm = "AM";
    if (hr > 12) {
      hr -= 12;
      ampm = "PM";
    }
    let delivery_time = hr + ":" + min + " " + ampm;

    let start_time = delivery_date + " " + delivery_time;
    this.setState({
      start_time: start_time,
      delivery_date: delivery_date,
      deliveryDatePickerVisible: false,
      delivery_time: delivery_time,
    });
  };

  AppointmentList = () => {
    this.props.navigation.navigate("AppointmentDetail");
  };

  render() {
    return (
      <Container>
        <View>
          <View style={styles.create_style1}>
            <TouchableOpacity
              style={styles.create_style2}
              onPress={this.handleBackButtonClick}
              activeOpacity={1}
            >
              <Image
                style={{
                  width: 20,
                  height: 20,
                  backgroundColor: "white",
                  marginVertical: 12,
                }}
                source={back}
              />
              {/* <Icon
                onPress={this.handleBackButtonClick}
                style={styles.create_style3}
                name="arrow-back"
              /> */}
            </TouchableOpacity>
            <View style={styles.create_style4} />
            <Text style={styles.create_style5}>New Appointment</Text>
          </View>
        </View>
        <Content padder>
          <View style={styles.create_style6} />
          {/* <Text>{console.log(this.state.doctor)}</Text> */}
          {/* <Text>dr id{this.state.doctor_id}</Text> */}
          <Input
            inputStyle={styles.create_style7}
            label="Title"
            labelStyle={styles.create_style8}
            placeholder="I have viral fever last two days..."
            onChangeText={(TextInputValue) =>
              this.setState({ title: TextInputValue })
            }
          />
          {/* <Text>{this.state.title}</Text> */}
          <View style={styles.create_style9} />
          <Input
            inputStyle={styles.create_style10}
            label="Description"
            labelStyle={styles.create_style11}
            placeholder="Write short description..."
            onChangeText={(TextInputValue) =>
              this.setState({ description: TextInputValue })
            }
          />
          {/* <Text>{this.state.description}</Text> */}
          <View style={styles.create_style12} />
          <Row>
            <Body>
              <Button
                onPress={this.showDeliveryDatePicker}
                style={{ width: 100 }}
                transparent
              >
                {/* <Icon style={styles.create_style13} name="time" /> */}
                <Image
                  style={{
                    width: 40,
                    height: 40,
                    backgroundColor: "white",
                    marginVertical: 12,
                    marginLeft:19
                  }}
                  source={time}
                />
              </Button>
              <Text style={styles.create_style14}>
                (Select your date & time)
              </Text>
              <View style={styles.create_style15} />
              <Text style={styles.create_style16}>{this.state.start_time}</Text>
              <DateTimePicker
                isVisible={this.state.deliveryDatePickerVisible}
                onConfirm={this.handleDeliveryDatePicked}
                onCancel={this.hideDeliveryDatePicker}
                minimumDate={new Date()}
                mode="datetime"
              />
            </Body>
          </Row>
          <Loader visible={this.state.isLoding} />
        </Content>
        <Footer style={styles.create_style17}>
          <TouchableOpacity
            activeOpacity={1}
            style={styles.create_style18}
            onPress={this.check_validation}
          >
            <Row>
              <Col style={styles.create_style19}>
                <Text style={styles.create_style20}>SUBMIT</Text>
              </Col>
            </Row>
          </TouchableOpacity>
        </Footer>
      </Container>
    );
  }
}
const styles = StyleSheet.create({
  create_style1: { alignItems: "flex-start", margin: 10 },
  create_style2: { width: 100, justifyContent: "center" },
  create_style3: { color: colors.theme_fg_two, fontSize: 30 },
  create_style4: { margin: 5 },
  create_style5: {
    fontSize: 25,
    color: colors.theme_fg_two,
    fontFamily: font_title,
  },
  create_style6: { margin: 10 },
  create_style7: { fontSize: 14 },
  create_style8: { fontFamily: font_title },
  create_style9: { margin: 10 },
  create_style10: { fontSize: 14, height: 80 },
  create_style11: { fontFamily: font_title },
  create_style12: { margin: 10 },
  create_style13: { fontSize: 50, color: colors.theme_fg },
  create_style14: {
    fontSize: 12,
    color: colors.grey,
    fontFamily: font_description,
  },
  create_style15: { margin: 10 },
  create_style16: { fontFamily: font_description },
  create_style17: { backgroundColor: "transparent" },
  create_style18: { width: "100%", backgroundColor: colors.theme_bg },
  create_style19: { alignItems: "center", justifyContent: "center" },
  create_style20: {
    color: colors.theme_fg_three,
    fontFamily: font_title,
    fontSize: 18,
  },

  header: {
    justifyContent: "flex-start",
    height: "10%",
    backgroundColor: colors.theme_bg,
    borderBottomLeftRadius: 45,
    borderBottomRightRadius: 45,
    shadowOffset: { width: 0, height: 15 },
    shadowColor: colors.theme_bg,
    shadowOpacity: 0.1,
    shadowRadius: 8,
    elevation: 10,
  },
  header_card: {
    alignItems: "center",
    borderRadius: 15,
    justifyContent: "center",
  },
  header_card_item: {
    borderTopLeftRadius: 15,
    borderTopRightRadius: 15,
    borderBottomLeftRadius: 15,
    borderBottomRightRadius: 15,
    shadowOffset: { width: 0, height: 15 },
    shadowColor: colors.theme_bg,
    shadowOpacity: 0.1,
    shadowRadius: 8,
    elevation: 10,
  },
  icon: {
    color: colors.theme_fg_two,
  },
  header_body: {
    flex: 3,
    justifyContent: "center",
  },
  title: {
    alignSelf: "center",
    color: colors.theme_fg_two,
    alignSelf: "center",
    fontSize: 16,
    fontFamily: font_title,
  },
  prescription_image: {
    width: 100,
    height: 70,
    alignSelf: "center",
    borderColor: colors.theme_bg_three,
    borderWidth: 1,
  },
});