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 Taro from "@tarojs/taro";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import check from '@/assets/svg/check.svg'
import './Auth.scss'
import { jumpPage } from "@/features/trackTimeDuration/hooks/Common";
import { ColorType } from "@/context/themes/color";
let useNavigation;
if (process.env.TARO_ENV == 'rn') {
  useNavigation = require("@react-navigation/native").useNavigation
}

export default function Component(props: { login: () => void }) {
  const { t } = useTranslation()
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const handleNameChange = (value: string) => {
    setName(value);
  };
  const handleEmailChange = (value: string) => {
    setEmail(value);
  };
  let navigation;
  if (useNavigation) {
    navigation = useNavigation()
  }

  const isButtonDisabled = name === '' || email === '';

  function signupComponent() {
    return <View>
      <Inputs value={name} onChange={handleNameChange} onConfirm={(e) => { }} placeholder={t('feature.auth.create_account.input_username_placeholder')}></Inputs>
      <View style={{ height: 20 }} />
      <Inputs value={email} onChange={handleEmailChange} onConfirm={(e) => { }} placeholder={t('feature.auth.create_account.input_email_placeholder')}></Inputs>
    </View>
  }

  function registerF() {
    if (isButtonDisabled) {
      return;
    }
    global.username = name
    global.email = email
    setTimeout(() => {
      jumpPage(`/pages/Auth?type=createPassword&name=${name}&email=${email}`, 'Auth', navigation,{
        type:'createPassword',
        name:name,
        email:email
      })
    }, 1000)
  }

  return <View style={{ width: '100%', height: '100%' }}>
    <Texts text={t('feature.auth.create_account.title')} type={TextType.primary}></Texts>
    <Texts text={t('feature.auth.create_account.sub_title')} type={TextType.secondary}></Texts>
    {
      signupComponent()
    }
    <Buttons
      onClick={registerF}
      title={t('feature.auth.create_account.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_account.footer_desc')}</Text>
      <Text className="login2" onClick={() => props.login()}>{t('feature.auth.create_account.footer_login')}</Text>
    </View>
  </View>
}