import * as WebBrowser from 'expo-web-browser'
import * as React from 'react'
import { StyleSheet, View, StatusBar, Platform, Image } from 'react-native'
import { Flex, WingBlank, InputItem } from '@ant-design/react-native'
import { Card, Paragraph, Caption } from 'react-native-paper'
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs'
import useModel from 'flooks'
import Toast from '../../flooks/Toast'
import user from '../../flooks/User'
import Button from '../../components/Button'

const Tab = createMaterialTopTabNavigator()

// const img = require('../../assets/images/loginImg.png')
const img2 = require('../../assets/images/loginLogo.png')

export default function LoginScreen({ navigation }) {
  const btnList = () => (
    <View style={styles.btn}>
      <Button
        text
        size="small"
        type="info"
        onPress={() => {
          navigation.navigate('BackPassword')
        }}
      >
        忘记密码
      </Button>
      <Button text size="small" type="info" onPress={() => {}}>
        用户注册
      </Button>
    </View>
  )

  return (
    <>
      {Platform.OS !== 'ios' && <StatusBar backgroundColor="#FFF2C7" />}
      <View style={styles.container}>
        <WingBlank style={styles.container}>
          <Flex
            direction="column"
            justify="center"
            align="stretch"
            style={styles.container}
          >
            <Card style={styles.center}>
              <Image source={img2} style={styles.img2} resizeMode="contain" />
              <View style={styles.tab}>
                <Tab.Navigator
                  tabBarOptions={{
                    activeTintColor: '#FFC750',
                    inactiveTintColor: '#000',
                    indicatorStyle: {
                      backgroundColor: '#FFC750',
                      height: 0,
                    },
                    labelStyle: {
                      fontSize: 16,
                    },
                    style: {
                      backgroundColor: '#fff',
                      height: 50,
                      elevation: 0,
                      shadowOffset: {
                        width: 0,
                        height: 0,
                      },
                      shadowOpacity: 0,
                      shadowRadius: 0,
                      borderBottomWidth: 1,
                      borderColor: '#eee',
                    },
                  }}
                >
                  <Tab.Screen
                    name="密码登陆"
                    component={LoginPassword}
                    initialParams={{ btnList }}
                  />
                  <Tab.Screen
                    name="验证码登陆"
                    component={LoginCode}
                    initialParams={{ btnList }}
                  />
                </Tab.Navigator>
              </View>
            </Card>
          </Flex>
        </WingBlank>
      </View>
    </>
  )
}

const LoginPassword = ({ route }) => {
  const [phone, setphone] = React.useState()
  const [password, setPassword] = React.useState()

  const { warnning } = useModel(Toast, [])
  const { loginByPsd } = useModel(user, [])
  const { params } = route
  const { btnList } = params || {}

  const submit = () => {
    if (!phone) {
      warnning('手机号不能为空')
    } else if (!password) {
      warnning('密码不能为空')
    } else {
      loginByPsd(phone, password)
    }
  }

  return (
    <View style={styles.list}>
      <InputItem
        clear
        type="phone"
        value={phone}
        onChange={setphone}
        placeholder="输入手机号"
        style={{ fontSize: 14 }}
      >
        <Paragraph>手机号</Paragraph>
      </InputItem>
      <InputItem
        clear
        type="password"
        value={password}
        onChange={setPassword}
        placeholder="输入密码"
        style={{ fontSize: 14 }}
      >
        <Paragraph>密码</Paragraph>
      </InputItem>

      {btnList()}

      <View style={[styles.btn, styles.sub]}>
        <Button onPress={submit}>登录</Button>
      </View>
    </View>
  )
}

const LoginCode = ({ route }) => {
  const [phone, setphone] = React.useState()
  const [code, setCode] = React.useState()
  const { warnning } = useModel(Toast, [])
  const { loginByPsd } = useModel(user, [])
  const { params } = route
  const { btnList } = params || {}
  const submit = () => {
    if (!phone) {
      warnning('手机号不能为空')
    } else if (!code) {
      warnning('验证码')
    } else {
      loginByPsd(phone, code)
    }
  }
  return (
    <View style={styles.list}>
      <InputItem
        clear
        type="phone"
        value={phone}
        onChange={setphone}
        style={{ fontSize: 14 }}
        placeholder="输入手机号"
      >
        <Paragraph>手机号</Paragraph>
      </InputItem>
      <InputItem
        clear
        type="number"
        value={code}
        onChange={setCode}
        extra={<Caption style={{ color: '#FFC21C' }}>发送验证码</Caption>}
        placeholder="输入验证码"
        maxLength={6}
        style={{ fontSize: 14 }}
        onExtraClick={() => {
          console.log('发送验证码')
        }}
      >
        <Paragraph>验证码</Paragraph>
      </InputItem>
      {btnList()}
      <View style={[styles.btn, styles.sub]}>
        <Button onPress={submit}>登录</Button>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#FFF2C7' },
  center: {
    paddingHorizontal: 10,
    // paddingVertical: 20,
    paddingTop: 20,
    backgroundColor: '#fff',
    borderRadius: 7,
    flexDirection: 'column',
    height: 380,
  },
  img2: {
    height: 90,
    backgroundColor: '#fff',
    width: '100%',
    // marginBottom: 20,
  },
  list: {
    backgroundColor: '#fff',
    borderWidth: 0,
    paddingTop: 10,
    height: 200,
  },
  tab: {
    flex: 1,
    backgroundColor: '#fff',
    paddingBottom: 20,
  },
  btn: {
    paddingLeft: 70,
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 5,
  },
  sub: {
    marginTop: 10,
    marginLeft: 10,
  },
})