import { StackScreenProps } from '@react-navigation/stack';
import * as React from 'react';
import { Div, Button, Image, Text, Avatar, Input } from 'react-native-magnus';
import { ScrollView } from 'react-native-gesture-handler';
import { useTranslation } from 'react-i18next';
import { useCreation } from 'ahooks';

export default function ChangePasswordScreen({ navigation }: StackScreenProps) {
  const { t } = useTranslation();

  const [password, setPassword] = React.useState<string>('');
  const [passwordNew1, setPasswordNew1] = React.useState<string>('');
  const [passwordNew2, setPasswordNew2] = React.useState<string>('');
  const canNext = useCreation(() => {
    if (password && passwordNew1 && passwordNew1 === passwordNew2) {
      return true;
    } else {
      return false;
    }
  }, [password, passwordNew1, passwordNew2]);

  return (
    <Div bg="gray100" flex={1}>
      <ScrollView
        contentContainerStyle={{
          flexGrow: 1,
          backgroundColor: '#f2f2f2',
        }}
      >
        <Div bg="white" px={15}>
          <Div
            row
            alignItems="center"
            py={10}
            borderColor="gray100"
            borderBottomWidth={1}
          >
            <Text w={75} textAlign="left">
              {t('yuan-mi-ma')}：
            </Text>
            <Input
              flex={1}
              rounded="sm"
              px={12}
              ml={5}
              h={30}
              type={'custom'}
              value={password}
              borderWidth={0}
              fontSize="md"
              secureTextEntry
              opacity={1}
              loaderColor="gray400"
              color="gray900"
              onChangeText={(text) => {
                setPassword(text);
              }}
              style={{ flex: 1 }}
              placeholder={t('qing-shu-ru-yuan-mi-ma')}
            />
          </Div>
          <Div
            row
            alignItems="center"
            py={10}
            borderColor="gray100"
            borderBottomWidth={1}
          >
            <Text w={75} textAlign="left">
              {t('xin-mi-ma')}：
            </Text>
            <Input
              flex={1}
              rounded="sm"
              px={12}
              ml={5}
              h={30}
              type={'custom'}
              value={passwordNew1}
              borderWidth={0}
              fontSize="md"
              secureTextEntry
              opacity={1}
              loaderColor="gray400"
              color="gray900"
              onChangeText={(text) => {
                setPasswordNew1(text);
              }}
              style={{ flex: 1 }}
              placeholder={t('qing-shu-ru-xin-mi-ma')}
            />
          </Div>
          <Div
            row
            alignItems="center"
            py={10}
            borderColor="gray100"
            borderBottomWidth={1}
          >
            <Text w={75} textAlign="left">
              {t('que-ren-mi-ma')}：
            </Text>
            <Input
              flex={1}
              rounded="sm"
              px={12}
              ml={5}
              h={30}
              type={'custom'}
              value={passwordNew2}
              borderWidth={0}
              fontSize="md"
              secureTextEntry
              opacity={1}
              loaderColor="gray400"
              color="gray900"
              onChangeText={(text) => {
                setPasswordNew2(text);
              }}
              style={{ flex: 1 }}
              placeholder={t('qing-zhong-fu-shu-ru-xin-mi-ma')}
            />
          </Div>
        </Div>

        <Button
          disabled={!canNext}
          block
          my={50}
          mx={15}
          bg="yellow500"
          fontSize="sm"
        >
          {t('bao-cun')}
        </Button>
      </ScrollView>
    </Div>
  );
}