import Inputs from "@/components/Inputs";
import { View, Text, Image } from "@tarojs/components";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import check from '@assets/svg/check.svg'
import Texts from "@/components/Texts";
import Box from "@/components/Box";
import { ComponentStatus, TextType } from "@/utils/types";
import Buttons from "@/components/Buttons";
import './Auth.scss'
import { login } from "@/services/user";
import { useDispatch, useSelector } from "react-redux";
import Taro from "@tarojs/taro";

export default function Login(props: { register: () => void }) {
    const { t } = useTranslation()
    const dispatch = useDispatch();
    const [name, setName] = useState('');
    const [password, setPassword] = useState('');
    const user = useSelector((state: any) => state.user);

    useEffect(() => {
        if (user.isLogin) {
            if (user.scenario_select_count > 0) {
                Taro.navigateBack({
                    delta: 2
                })
            }
            else {
                Taro.navigateBack({
                    delta: 1
                })
                Taro.redirectTo({
                    url: '/pages/ChooseScenario'
                })
            }

        }
    }, [user.isLogin])

    const handleNameChange = (value: string) => {
        setName(value);
    };

    const handlePasswordChange = (value: string) => {
        setPassword(value);
    }
    const isLoginButtonDisabled = name === '' || password === '';

    function loginComponent() {
        return <View>
            <Inputs value={name} onChange={handleNameChange} placeholder={t('feature.auth.login.input_account_placeholder')}></Inputs>
            <View style={{ height: 20 }} />
            <Inputs value={password} isSecure={true} onChange={handlePasswordChange} placeholder={t('feature.auth.login.input_password_placeholder')}></Inputs>
        </View>
    }

    function LoginF() {
        if (isLoginButtonDisabled) {
            return;
        }
        dispatch(login(name, password) as any);
    }

    return <View style={{ backgroundColor: '#000', flex: 1, flexDirection: 'column', display: 'flex', width: '100vw', height: '100vh' }}>
        <Texts text={'App Name'} type={TextType.primary}></Texts>
        {/* <Texts text={t('feature.auth.create_account.sub_title')} type={TextType.secondary}></Texts> */}
        <Box child={loginComponent()}></Box>

        <Buttons
            onClick={LoginF}
            title={t('feature.auth.create_account.btn_next')}
            style={{ marginLeft: 23, marginRight: 23, marginTop: 20, marginBottom: 20 }}
            status={isLoginButtonDisabled ? 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.login.footer_desc')}</Text>
            <Text className="login" onClick={() => props.register()}>{t('feature.auth.login.footer_sign_up')}</Text>
        </View>
    </View>
}