import React from "react"
import {
  Platform,
  StyleSheet,
  Text,
  Image,
  Switch,
  TextInput,
  View,
  Button,
} from "react-native"
import { MessageModal } from "../Modal"
import logoImage from "./images/deighton.png"
import { FormBinder } from "react-form-binder"
import { api } from "../API"
import { BoundSwitch, BoundInput, BoundButton } from "../ui"
import KeyboardSpacer from "react-native-keyboard-spacer"
import { versionInfo } from "../version"
import autobind from "autobind-decorator"
import { isIphoneX } from "react-native-iphone-x-helper"

export class Login extends React.Component {
  static bindings = {
    email: {
      alwaysGet: true,
      isValid: (r, v) => v !== "",
    },
    password: {
      alwaysGet: true,
      isValid: (r, v) => v !== "",
    },
    rememberMe: {
      alwaysGet: true,
      initValue: true,
      isValid: true,
    },
    login: {
      noValue: true,
      isDisabled: (r) => !(r.anyModified && r.allValid),
    },
  }

  static styles = StyleSheet.create({
    page: {
      minHeight: "50%",
      flex: 1,
      backgroundColor: "#fff",
      alignItems: "center",
      justifyContent: "center",
    },
    logo: {
      width: "50%",
    },
    inputRow: {
      paddingTop: 10,
      width: "60%",
      flexDirection: "column",
      justifyContent: "flex-end",
      alignItems: "flex-start",
    },
    switchRow: {
      paddingTop: 10,
      width: "60%",
      flexDirection: "row",
      justifyContent: "flex-end",
      alignItems: "center",
    },
    buttonRow: {
      paddingTop: 10,
      width: "60%",
      flexDirection: "row",
      justifyContent: "flex-end",
      alignItems: "center",
    },
  })

  constructor(props) {
    super(props)
    this.state = {
      binder: new FormBinder({ email: "john@lyon-smith.org" }, Login.bindings),
      messageModal: null,
    }
  }

  @autobind
  handleLogin() {
    let obj = this.state.binder.getModifiedFieldValues()
    let { history } = this.props

    if (obj) {
      api
        .login(obj.email, obj.password, obj.rememberMe)
        .then((user) => {
          history.replace("/home")
        })
        .catch((error) => {
          this.setState({
            messageModal: {
              icon: "hand",
              message: "Unable to login",
              detail: error.message,
            },
          })
        })
    }
  }

  @autobind
  handleMessageDismiss() {
    this.setState({ messageModal: null })
  }

  render() {
    const { messageModal } = this.state

    return (
      <View style={Login.styles.page} behavior="padding">
        <Image
          style={Login.styles.logo}
          source={logoImage}
          resizeMode="contain"
        />
        <View style={Login.styles.inputRow}>
          <BoundInput
            name="email"
            label="Email:"
            placeholder="name@xyz.com"
            message="Must enter a valid email"
            binder={this.state.binder}
          />
        </View>
        <View style={Login.styles.inputRow}>
          <BoundInput
            name="password"
            password
            label="Password:"
            message="Must supply a password"
            binder={this.state.binder}
          />
        </View>
        <View style={Login.styles.switchRow}>
          <BoundSwitch
            name="rememberMe"
            binder={this.state.binder}
            label="Remember Me"
          />
        </View>
        <View style={Login.styles.buttonRow}>
          <BoundButton
            title="Login"
            name="login"
            width="100%"
            onPress={this.handleLogin}
            binder={this.state.binder}
          />
        </View>
        <View style={{ width: "60%", alignItems: "center" }}>
          <Text
            style={{
              paddingTop: 15,
              alignSelf: "flex-end",
              color: "lightgray",
              fontSize: 10,
            }}>
            {versionInfo.version}
          </Text>
        </View>
        <MessageModal
          open={!!messageModal}
          icon={messageModal ? messageModal.icon : ""}
          message={messageModal ? messageModal.message : ""}
          detail={messageModal ? messageModal.detail : ""}
          onDismiss={messageModal && this.handleMessageDismiss}
        />
        {Platform.OS === "ios" && <KeyboardSpacer />}
      </View>
    )
  }
}