/* eslint-disable camelcase */
import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import {
  Image,
  StyleSheet,
} from 'react-native';
import { useModel } from 'flooks';
import {
  Layout,
  Text,
  useTheme,
  Button,
} from '@ui-kitten/components';
import { useFocusEffect } from '@react-navigation/native';
import FormInput from '../components/FormInput';
import ScrollPage from '../components/ScrollPage';
import ConnectButton from '../components/ConnectButton';
import SmsInput from "../components/SmsInput";


const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: 10,
    paddingBottom: 33,
  },
  tabContent: {
    backgroundColor: '#fff',
    marginTop: 20,
  },
  logo: {
    width: 100,
    height: 100,
    alignSelf: 'center',
  },
  logo2: {
    width: 97,
    height: 21,
    alignSelf: 'center',
    marginTop: 2,
  },
  text: {
    marginTop: 16,
  },
  layoutLeft: {
    flexDirection: 'row',
    paddingVertical: 10,
    justifyContent: 'center',
  },
  form: {
    paddingHorizontal: 16,
    paddingVertical: 20,
    alignSelf: 'stretch',
  },
});


const img1 = require('../assets/images/logo_1.png')
const img2 = require('../assets/images/logo_2.png')



export default function RegisterScreen() {
  const theme = useTheme();
  const { changeBackground } = useModel('barModel');

  const {
    welcom,
    register_form_1,
    register_pla_1,
    register_form_2,
    register_pla_2,
    register_form_4,
    register_pla_4,
    login_form_3,
    login_pla_3,
    login_form_2,
    login_pla_2,
    register_form_3,
    register_pla_3,
    next,
    login_btn_code_1,
  } = useModel('wordsModel');

  useFocusEffect(
    React.useCallback(() => {
      changeBackground(theme['background-basic-color-1']);
    }, []),
  );

  const [name, changeName] = React.useState('');
  const [showName, changeShowName] = React.useState('');
  const [phone, changePhone] = React.useState('');
  const [password, changePassword] = React.useState('');
  const [password2, changePassword2] = React.useState('');
  const [code, changeCode] = React.useState('');

  const canNext = React.useMemo(() => {
    if (
      name
            && showName
            && phone
            && code
            && password
            && password === password2
    ) {
      return true;
    }
    return false;
  }, [name, showName, phone, password, code, password2]);

  const { registerFirst } = useModel('userModel', true);

  return (
    <ScrollPage>
      <Layout style={styles.container}>
        <Image source={img1} style={styles.logo} />
        <Image source={img2} style={styles.logo2} />
        <Text style={styles.text} category="h6">
          {welcom}
        </Text>
        <Layout style={styles.form}>
          {/* 输入商家名称 */}
          <FormInput
            label={`${register_form_1}:`}
            value={name}
            placeholder={register_pla_1}
            onChange={changeName}
            textAlign="right"
          />
          {/* 显示名称: */}
          <FormInput
            label={`${register_form_2}:`}
            value={showName}
            placeholder={register_pla_2}
            onChange={changeShowName}
            textAlign="right"
          />

          {/* 手机号 */}
          <FormInput
            label={`${register_form_4}:`}
            value={phone}
            type="phone"
            placeholder={register_pla_4}
            onChange={changePhone}
            textAlign="right"
          />

          {/* 验证码 */}
          <SmsInput
            label={`${login_form_3}:`}
            placeholder={login_pla_3}
            phone={phone}
            onCodeChange={changeCode}
          />

          {/* 密码 */}
          <FormInput
            label={`${login_form_2}:`}
            value={password}
            type="password"
            placeholder={login_pla_2}
            onChange={changePassword}
            textAlign="right"
          />

          {/* 确认密码 */}
          <FormInput
            label={`${register_form_3}:`}
            value={password2}
            type="password"
            placeholder={register_pla_3}
            onChange={changePassword2}
            textAlign="right"
          />

          <Layout style={styles.layoutLeft} level="1">
            <Button
              status="primary"
              disabled={!canNext}
              onPress={() =>
                registerFirst({
                  name,
                  showName,
                  phone,
                  password,
                })
              }
            >
              {next}
            </Button>
          </Layout>
        </Layout>

        <ConnectButton />
      </Layout>
    </ScrollPage>
  );
}