import * as React from 'react'
import {
  Platform,
  StyleSheet,
  Text,
  View,
  KeyboardAvoidingView,
  Picker,
} from 'react-native'
// import ActionSheet from 'react-native-actionsheet'
import {Input } from 'react-native-elements'
import theme from './../theme/theme'
import Popup from 'reactjs-popup'

import provincias from '../config/provincias'
import config from '../config/config'
import { ReCaptcha } from 'react-recaptcha-v3'
import classNames from 'classnames'

const CheckBox = ({ title, checked, onPress }) => {

  return (
    <button onClick={onPress} className={classNames({checkbox: true, checked})}>
      {title}
    </button>
  )
}

export default class Form extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      // location,
      age: '',
      dni: '',
      email: '',
      phone: '',
      address: '',
      localidad: '',
      provincia: '',
      location: {
        located: false,
        latitude: '',
        longitude: '',
      },

      //symptoms
      bodyTemperature: 37,
      soreThroat: false,
      difficultyBreathing: false, //validado

      //condition
      isPregnant: false,
      isOver60yearsOld: false,

      //comorbidity
      cancer: false,
      diabetes: false,
      hepatic: false,
      kidneyDisease: false,
      respiratoryDisease: false,
      cardiologicDisease: false,
      recaptchaToken: ""
    }
  }

  componentDidMount() {
    this.setState({ provincia: provincias[0].id })
    navigator.geolocation.getCurrentPosition(this.locationTaken, this.locationError)
  }

  sendForm = async (formPayload) => {
    // let locationPayload = {
    //   located: false,
    //   latitude: '',
    //   longitude: '',
    // }

    const payload = {
      ...formPayload,
      location: { ...this.state.location },
      // location: locationPayload,
    }

    await fetch(config.BACKEND_ENDPOINT + '/people', {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(payload),
    })
  }

  handleSaveTest = () => {
    const {
      age,
      dni,
      email,
      phone,
      address,
      localidad,
      provincia,

      //symptoms
      bodyTemperature,
      soreThroat,
      difficultyBreathing, //validado

      //condition
      isPregnant,
      isOver60yearsOld,

      //comorbidity
      cancer,
      diabetes,
      hepatic,
      kidneyDisease,
      respiratoryDisease,
      cardiologicDisease,

      recaptchaToken
    } = this.state

    this.sendForm({
      age,
      dni,
      email,
      phone,
      address,
      localidad,
      provincia,
      bodyTemperature,
      soreThroat,
      difficultyBreathing,
      isPregnant,
      isOver60yearsOld,
      cancer,
      diabetes,
      hepatic,
      kidneyDisease,
      respiratoryDisease,
      cardiologicDisease,
      recaptchaToken
    })
  }

  handleClick = () => {
    alert('You tapped the button!')
  }

  showActionSheet = () => {
    // this.ActionSheet.show()
  }

  locationTaken = (location) => {
    let loc = {
      located: true,
      latitude: location.coords.latitude,
      longitude: location.coords.longitude,
      // accuracy: location.coords.accuracy
    }
    this.setState( { location: loc } )
  }

  locationError = (err) => {
    console.warn(`Geo ERROR(${err.code}): ${err.message}`);
  }

  render() {
    const { history } = this.props
    const {
      age,
      dni,
      email,
      phone,
      address,
      localidad,
      provincia,

      //symptoms
      bodyTemperature,
      soreThroat,
      difficultyBreathing, //validado

      //condition
      isPregnant,
      isOver60yearsOld,

      //comorbidity
      cancer,
      diabetes,
      hepatic,
      kidneyDisease,
      respiratoryDisease,
      cardiologicDisease,

      recaptchaToken
    } = this.state

    const validEmail = /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,6})+$/.test(email.trim())
    const allowSend = !phone || !dni || !validEmail || !recaptchaToken

    return (
      <KeyboardAvoidingView
        style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}
        behavior="padding"
        enabled
        keyboardVerticalOffset={100}
      >
        <View style={styles.container}>
          <View style={styles.tituloContainer}>
            <Text style={styles.tituloText}> ¿Cuál es su temperatura corporal?</Text>
          </View>

          <Input
          style={{ marginVertical: 40}}
          inputContainerStyle={{ backgroundColor: '#ededed', paddingHorizontal: 5, marginHorizontal: 20, marginVertical: 10 }}
          keyboardType="numeric"
          value={bodyTemperature.toString()}
          min={34}
          max={42}
          step={0.1}
          onChangeText={(value) => this.setState({ bodyTemperature: value })}
        />

          <View style={styles.tituloContainer}>
            <Text style={styles.tituloText}> ¿Tenés tos o dolor de garganta? </Text>
          </View>

          <View style={styles.checkboxGrid}>
            <CheckBox title="SI" checked={soreThroat} onPress={() => this.setState({ soreThroat: true })} />
            <CheckBox title="NO" checked={!soreThroat} onPress={() => this.setState({ soreThroat: false })} />
          </View>

          <View style={styles.tituloContainer}>
            <Text style={styles.tituloText}> ¿Tenés dificultad respiratoria o falta de aire? </Text>
          </View>

          <View style={styles.checkboxGrid}>
            <CheckBox
              title="SI"
              checked={difficultyBreathing}
              onPress={() => this.setState({ difficultyBreathing: true })}
            />
            <CheckBox
              title="NO"
              checked={!difficultyBreathing}
              onPress={() => this.setState({ difficultyBreathing: false })}
            />
          </View>

          <View style={styles.tituloContainer}>
            <Text style={styles.tituloText}>Situación de salud</Text>
          </View>

          <View style={styles.checkboxGrid}>
            <CheckBox
              textStyle={styles.checkbox}
              title="Mayor de 60 años"
              checked={isOver60yearsOld}
              onPress={() => this.setState({ isOver60yearsOld: !isOver60yearsOld })}
            />
            <CheckBox
              title="Estoy embarazada"
              checked={isPregnant}
              onPress={() => this.setState({ isPregnant: !isPregnant })}
            />
          </View>
          <View style={styles.checkboxGrid}>
            <CheckBox title="Cáncer" checked={cancer} onPress={() => this.setState({ cancer: !cancer })} />
            <CheckBox title="Diabetes" checked={diabetes} onPress={() => this.setState({ diabetes: !diabetes })} />
          </View>
          <View style={styles.checkboxGrid}>
            <CheckBox
              style={styles.checkbox}
              title="Enfermedad Hepática"
              checked={hepatic}
              onPress={() => this.setState({ hepatic: !hepatic })}
            />
            <CheckBox
              title="Enfermedad renal crónica"
              checked={kidneyDisease}
              onPress={() => this.setState({ kidneyDisease: !kidneyDisease })}
            />
          </View>
          <View style={styles.checkboxGrid}>
            <CheckBox
              title="Enfermedad respiratoria"
              checked={respiratoryDisease}
              onPress={() => this.setState({ respiratoryDisease: !respiratoryDisease })}
            />
            <CheckBox
              title="Enfermedad Cardiológica"
              checked={cardiologicDisease}
              onPress={() => this.setState({ cardiologicDisease: !cardiologicDisease })}
            />
          </View>

          <View style={styles.titulosPreguntas}>

          <View style={styles.preguntasCampos}>
            <Input
              style={{ marginVertical: 40 }}
              inputContainerStyle={{ backgroundColor: '#ededed', paddingHorizontal: 5, marginVertical: 0, marginTop: 20 }}
              placeholder="Edad"
              keyboardType="numeric"
              value={age}
              onChangeText={(value) => this.setState({ age: value })}
            />
            <Input
              style={{ marginVertical: 50 }}
              inputContainerStyle={{ backgroundColor: '#ededed', paddingHorizontal: 5, marginVertical: 0, marginTop: 20 }}
              placeholder="DNI o Número de pasaporte"
              keyboardType="numeric"
              value={this.state.dni}
              errorStyle={{ color: 'red' }}
              onChangeText={(value) => this.setState({ dni: value })}
              errorMessage={!dni ? 'Campo requerido' : ''}
            />

            <Input
              style={{ marginVertical: 40 }}
              inputContainerStyle={{ backgroundColor: '#ededed', paddingHorizontal: 5, marginVertical: 0, marginTop: 20 }}
              placeholder="Correo Electrónico"
              value={this.state.email}
              onChangeText={(value) => this.setState({ email: value.trim() })}
              errorStyle={{ color: 'red' }}
              errorMessage={validEmail ? '' : 'Campo requerido'}
            />

            <Input
              style={{ marginVertical: 40 }}
              inputContainerStyle={{ backgroundColor: '#ededed', paddingHorizontal: 5, marginVertical: 0, marginTop: 20 }}
              placeholder="Teléfono"
              keyboardType="numeric"
              value={this.state.phone}
              onChangeText={(value) => this.setState({ phone: value })}
              errorStyle={{ color: 'red' }}
              errorMessage={!phone ? 'Campo requerido' : ''}
            />

            <Input
              style={{ marginVertical: 40 }}
              inputContainerStyle={{ backgroundColor: '#ededed', paddingHorizontal: 5, marginVertical: 0, marginTop: 20 }}
              placeholder="Dirección"
              value={address}
              onChangeText={(value) => this.setState({ address: value })}
            />

            <Input
              style={{ marginVertical: 40 }}
              inputContainerStyle={{ backgroundColor: '#ededed', paddingHorizontal: 5, marginVertical: 0, marginTop: 20 }}
              placeholder="Localidad"
              value={localidad}
              onChangeText={(value) => this.setState({ localidad: value })}
            />
{/*
            <ActionSheet
              ref={(o) => (this.ActionSheet = o)}
              title={'Elige tu provincia'}
              options={['Cancelar', ...provincias.map((p) => p.provincia)]}
              cancelButtonIndex={0}
              destructiveButtonIndex={1}
              onPress={(i) => {
                if (i !== 0) {
                  this.setState({ provincia: i - 1 })
                }
              }}
            /> */}

            <Picker
              selectedValue={this.state.provincia}
              onValueChange={(provincia) => this.setState({ provincia })}
              style={{
                marginVertical: 20,
                backgroundColor: '#ededed',
                minHeight: 40,
                borderWidth: 0,
                borderColor: 'rgb(134, 147, 158)',
                borderBottomWidth: 1,
                marginHorizontal: 10,
                paddingHorizontal: 5,
              }}
              mode="dropdown"
            >
              {provincias.map((p, index) => (
                <Picker.Item key={index} label={p.provincia} value={p.id} />
              ))}
            </Picker>
            <ReCaptcha
              sitekey={config.recaptchaKey}
              action='form_submit'
              verifyCallback={(recaptchaToken=>{this.setState({recaptchaToken})})}/>
            <Text style={{color: "red", fontSize: 12, display: recaptchaToken === null?"block":"none"}}>ReCaptcha invalido. Por favor intentelo nuevamente</Text>
          </View>
            <View style={{ marginTop: 20 }}>
                <Popup disabled={allowSend} trigger={<button style={{margin: "20px 0"}} className={classNames({disabled: allowSend})}>CONFIRMAR</button>} modal>
                {close => (
                  <View style={{padding: 20}}>
                    <Text style={{marginBottom: 20}}>Ministerio de Salud de la Nación</Text>
                    <Text style={{marginBottom: 20}}>Este formulario tiene caracter de declaración jurada, hacer una falsa declaración puede considerarse una contravención grave.</Text>
                    <Text style={{marginBottom: 20}}>Al confirmar acepto los <a target="_blank" rel="noopener noreferrer" href={process.env.PUBLIC_URL + "/terminos.html"}>Términos y Condiciones</a> de la Aplicación Covid-19 Ministerio de Salud así como a la Política de Privacidad establecida en el punto 5 de los <a target="_blank" rel="noopener noreferrer" href={process.env.PUBLIC_URL + "/terminos.html"}>Términos y Condiciones</a>.</Text>
                  <button style={{marginBottom: 20, backgroundColor:'#A9A9A9', color: '#ffffff'}} onClick={close}>Cancelar</button>
                  <button style={{}}
                    onClick={() => {
                          this.handleSaveTest()
                          if (
                                // bodyTemperature >= 38 plus other condition
                                // is required.
                                bodyTemperature >= 38 &&
                                (difficultyBreathing ||
                                diabetes || cancer ||
                                isPregnant || isOver60yearsOld ||
                                hepatic || kidneyDisease||
                                respiratoryDisease)
                          ) {
                            history.replace(`/diagnostico/${provincia}`)
                          } else if (bodyTemperature >= 38) {
                            history.replace('/cuarentena/')
                          } else { // no fever, negative diagnostic
                            history.push('/diagnostico_bueno/')
                          }
                        }
                      }> OK, Enviar </button>
                    </View>
                    )}
              </Popup>
            </View>
          </View>
        </View>
      </KeyboardAvoidingView>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  developmentModeText: {
    marginBottom: 20,
    color: 'rgba(0,0,0,0.4)',
    fontSize: 14,
    lineHeight: 19,
    textAlign: 'center',
  },
  contentContainer: {
    paddingTop: 30,
  },
  welcomeContainer: {
    alignItems: 'center',
    marginTop: 10,
    marginBottom: 20,
  },
  welcomeImage: {
    width: 100,
    height: 80,
    resizeMode: 'contain',
    marginTop: 3,
    marginLeft: -10,
  },
  getStartedContainer: {
    alignItems: 'center',
    marginHorizontal: 50,
  },

  titulosPreguntas: {
    marginHorizontal: 25,
    paddingVertical: 10,
  },

  homeScreenFilename: {
    marginVertical: 7,
  },
  codeHighlightText: {
    color: 'rgba(96,100,109, 0.8)',
  },
  codeHighlightContainer: {
    backgroundColor: 'rgba(0,0,0,0.05)',
    borderRadius: 3,
    paddingHorizontal: 4,
  },
  getStartedText: {
    fontSize: 17,
    color: 'rgba(96,100,109, 1)',
    lineHeight: 24,
    textAlign: 'center',
  },
  tabBarInfoContainer: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    ...Platform.select({
      ios: {
        shadowColor: 'black',
        shadowOffset: { width: 0, height: -3 },
        shadowOpacity: 0.1,
        shadowRadius: 3,
      },
      android: {
        elevation: 20,
      },
    }),
    alignItems: 'center',
    backgroundColor: '#fbfbfb',
    paddingVertical: 20,
  },
  tabBarInfoText: {
    fontSize: 17,
    color: 'rgba(96,100,109, 1)',
    textAlign: 'center',
  },
  navigationFilename: {
    marginTop: 5,
  },
  helpContainer: {
    marginTop: 15,
    alignItems: 'center',
  },
  helpLink: {
    paddingVertical: 15,
  },

  loginScreenButton: {
    marginRight: 40,
    marginLeft: 40,
    marginTop: 10,
    paddingTop: 10,
    paddingBottom: 10,
    backgroundColor: '#1E6738',
    borderRadius: 10,
    borderWidth: 1,
    borderColor: '#fff',
  },
  loginText: {
    color: '#fff',
    textAlign: 'center',
    paddingLeft: 10,
    paddingRight: 10,
  },
  helpLinkText: {
    fontSize: 14,
    color: '#2e78b7',
  },
  checkboxText: {
    fontFamily: 'Encode Sans:700',
    fontSize: 14,
    textAlign: 'center',
  },
  checkbox: {
    textAlign: 'center',
  },
  checkboxContainer: {
    backgroundColor: theme.palette.grey[20],
    padding: 10,
    borderRadius: 10,
    width: '100%',
    height: 65,
    flex: 0.5,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    margin: 5,
  },
  checkboxContainerChecked: {
    backgroundColor: theme.palette.secondary.main,
  },
  checkboxGrid: {
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row',
    flex: 1,
    marginLeft: 20,
    marginRight: 20,
  },

  tituloContainer: {
    padding: 30,
  },
  tituloText: {
    fontFamily: 'Encode Sans:500',
    fontSize: 17,
  },
})