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 { 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";

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

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

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

  function registerF() {
    if (isButtonDisabled) {
      return;
    }
    dispatch(register(
      global.username,
      global.email,
      password
    ) as any);
  }

  return <View style={{ backgroundColor: '#000', flex: 1, flexDirection: 'column', display: 'flex', width: '100vw', height: '100vh' }}>
    <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>
    <Box children={loginComponent()}></Box>
    <Buttons
      onClick={registerF}
      title={t('feature.auth.create_password.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_password.footer_desc')}</Text>
      <Text className="login">{t('feature.auth.create_password.footer_login')}</Text>
    </View>
  </View>
}