import Box from "@/components/layout/Box";
import Buttons from "@/components/basic/Buttons";
import Inputs from "@/components/input/Inputs";
import Texts from "@/components/basic/Texts";
import { ComponentStatus, TextType } from "@/utils/types";
import { View, Image, Text } from "@tarojs/components";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { useDispatch, useSelector } from "react-redux";
import check from '@/assets/svg/check.svg'
import './Auth.scss'
import Taro from "@tarojs/taro";
import { register } from "@/services/user";
import { ColorType } from "@/context/themes/color";
import { registerSuccess } from "@/store/user";

let useNavigation;
if (process.env.TARO_ENV == 'rn') {
  useNavigation = require("@react-navigation/native").useNavigation
}

export default function Component(prop: { name?: string, email?: string }) {
  const { t } = useTranslation()
  const dispatch = useDispatch();

  const [password, setPassword] = useState('');
  const [repeat, setRepeat] = useState('');

  const handlePasswordChange = (value: string) => {
    setPassword(value);
  };
  const handleRepeatChange = (value: string) => {
    setRepeat(value);
  };

  const isButtonDisabled = password === '' || repeat === '';

  const user = useSelector((state: any) => state.user);
  let navigation;
  if (useNavigation) {
    navigation = useNavigation()
  }


  useEffect(() => {
    if (user.isLogin) {
      navigation.pop(3)
      return
      Taro.navigateBack({
        delta: 2
      })
      Taro.redirectTo({
        url: '/pages/clock/ChooseScenario'
      })
    }
  }, [user.isLogin])

  function loginComponent() {
    return <View>
      <Inputs value={password} isSecure={true} onChange={handlePasswordChange} onConfirm={(e) => { }} placeholder={t('feature.auth.create_password.input_password_placeholder')}></Inputs>
      <View style={{ height: 20 }} />
      <Inputs value={repeat} isSecure={true} onChange={handleRepeatChange} onConfirm={(e) => { }} placeholder={t('feature.auth.create_password.input_password_confirm_placeholder')}></Inputs>
    </View>
  }

  function registerF() {
    if (isButtonDisabled) {
      return;
    }

    register(
      global.username,
      global.email,
      password
    ).then(res => {
      dispatch(registerSuccess(res))
      
    }).catch(e => {
      console.log('oppsu')
    })
  }

  return <View style={{ backgroundColor: '#000', width: '100%', height: '100%' }}>
    <Texts text={t('feature.auth.create_password.title')} type={TextType.primary}></Texts>
    <Texts text={t('feature.auth.create_password.sub_title')} type={TextType.secondary}></Texts>
    {loginComponent()}
    <Buttons
      onClick={registerF}
      title={t('feature.auth.create_password.btn_next')}
      btnStyle={{ marginLeft: 23, marginRight: 23, marginTop: 20, marginBottom: 20, height: 44, borderRadius: 22, backgroundColor: ColorType.fast }}
      disabled={isButtonDisabled}
    ></Buttons>
    <View className="agree_view">
      <Image style='width:12px;height:12px;' src={check} />
      <Text className='agree_text'>{t('page.auth.agreement')}</Text>
    </View>
    <View style={{ flex: 1 }} />
    <View className="footer">
      <Text className="have_account">{t('feature.auth.create_password.footer_desc')}</Text>
      <Text className="login2">{t('feature.auth.create_password.footer_login')}</Text>
    </View>
  </View>
}