import Inputs from "@/components/input/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/basic/Texts";
import Box from "@/components/layout/Box";
import { ComponentStatus, TextType } from "@/utils/types";
import Buttons from "@/components/basic/Buttons";
import './Auth.scss'
import { clientId, login } from "@/services/user";
import { useDispatch, useSelector } from "react-redux";
import Taro from "@tarojs/taro";
import { ColorType } from "@/context/themes/color";
import { loginSuccess } from "@/store/user";

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

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

    let navigation;
    if (useNavigation) {
        navigation = useNavigation()
    }

    useEffect(() => {
        if (user.isLogin) {

            if (process.env.TARO_ENV=='rn'){
                navigation.pop(2)
                return
            }

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

        }
    }, [user.isLogin])

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

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

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

    function LoginF() {
        if (isLoginButtonDisabled) {
            return;
        }
        login(name, password).then(res => {
            dispatch(loginSuccess(res))
            clientId()
            // navigation.goBack(3)
        }).catch(e => {
            // alert(e.data.error_message)
            // alert(''+JSON.stringify(e))
            Taro.showToast({
                icon:'none',
                title:e.error_message
            })
            console.log('error',e)
        })
        // dispatch(login(name, password) as any);
    }

    return <View style={{ width: '100%', height: '100%' }}>
        <Texts text={'App Name'} type={TextType.primary}></Texts>
        {
            loginComponent()
        }
        <Buttons
            onClick={LoginF}
            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={isLoginButtonDisabled}></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="login2" onClick={() => props.register()}>{t('feature.auth.login.footer_sign_up')}</Text>
        </View>
    </View>

    return <View style={{ backgroundColor: '#000', flex: 1, flexDirection: 'column', display: 'flex', width: '100%', height: '100%' }}>
        <Texts text={'App Name'} type={TextType.primary}></Texts>
        {/* <Texts text={t('feature.auth.create_account.sub_title')} type={TextType.secondary}></Texts> */}
        <Box children={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="login2" onClick={() => props.register()}>{t('feature.auth.login.footer_sign_up')}</Text>
        </View>
    </View>
}