import Box from "@/components/Box";
import Buttons from "@/components/Buttons";
import Inputs from "@/components/Inputs";
import Texts from "@/components/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'

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);
  };

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

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

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

    // setTimeout(() => {
    //     Taro.navigateBack()
    //     Taro.redirectTo({
    //         url: '/pages/ChooseScenario'
    //     })
    // },1000)
  }


  return <View style={{ backgroundColor: '#000', flex: 1, flexDirection: 'column', display: 'flex', width: '100vw', height: '100vh' }}>
    <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>
    <Box child={signupComponent()}></Box>

    <Buttons
      onClick={registerF}
      title={t('feature.auth.create_account.btn_next')}
      style={{ marginLeft: 23, marginRight: 23, marginTop: 20, marginBottom: 20 }}
      status={isButtonDisabled ? ComponentStatus.disable : ComponentStatus.enable}></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="login" onClick={() => props.login()}>{t('feature.auth.create_account.footer_login')}</Text>
    </View>
  </View>
}