import {MyButton} from '@components/MyButton';
import {MyIconInput} from '@components/MyInput';
import {MyScreenContainer} from '@components/MyScreenContainer';
import {MyTitle} from '@components/MyTitle';
import {appVarActions} from '@configs/appVarReducer';
import {ToBase64} from '@helper/base64';
import {apiBackendRequest, makeRequest} from '@helper/request';
import {RootScreenNavigationProp} from '@navigation/navigation';
import {
  ContentContainer,
  navigateToHome,
} from '@navigation/registration/registration';
import {useNavigation} from '@react-navigation/native';
import {RootState, store} from '@redux/store';
import MyUserManager from '@user/MyUserManager';
import {useState} from 'react';
import {Text} from 'react-native';
import {View} from 'react-native';
import {useSelector} from 'react-redux';

function Title({text, description}: {text: string; description?: string}) {
  return (
    <>
      <MyTitle text={text} textAlign="left" paddingBottom={0} />
      {description && <Text>{description}</Text>}
    </>
  );
}

export function SignUpStepUsername() {
  const lang = useSelector(
    (state: RootState) => state.appVariables.lang.registration,
  );
  const navigation = useNavigation<RootScreenNavigationProp>();

  const registerProcess = useSelector(
    (state: RootState) => state.appVariables.preferences.RegisterProcess,
  );

  const [username, setUsername] = useState('');

  return (
    <MyScreenContainer
      style={{
        flexDirection: 'column',
      }}>
      <ContentContainer>
        <Title
          text={lang.signUpStepUsername.title}
          description={lang.signUpStepUsername.description}
        />

        <View style={{gap: 12, marginTop: 20}}>
          <MyIconInput
            text={lang.signUpStepUsername.inputUsername}
            iconName="person"
            value={username}
            onChangeText={text => setUsername(text)}
          />

          <MyButton
            type="secondary"
            text={lang.buttonNext}
            style={{marginBottom: 20}}
            onPress={() => {
              let rp = {...registerProcess};

              rp.Username = username;

              store.dispatch(appVarActions.setRegisterProcess(rp));

              navigation.navigate('Registration', {
                screen: /*'SignUpStepPhoneNumber' */ 'SignUpStepPassword',
              });
            }}
          />
        </View>
      </ContentContainer>
    </MyScreenContainer>
  );
}
/*
export function SignUpStepPhoneNumber() {
  const lang = useSelector(
    (state: RootState) => state.appVariables.lang.registration,
  );
  const navigation = useNavigation<RootScreenNavigationProp>();

  return (
    <MyScreenContainer
      style={{
        flexDirection: 'column',
      }}>
      <ContentContainer>
        <Title text={lang.signUpStepPhoneNumber.title} />

        <View style={{gap: 12, marginTop: 20}}>
          <MyIconInput
            text={lang.signUpStepPhoneNumber.inputPhoneNumber}
            iconName="phone-iphone"
            keyboardType="phone-pad"
          />

          <MyButton
            type="secondary"
            text={lang.buttonNext}
            style={{marginBottom: 20}}
            onPress={() => {
              navigation.navigate('Registration', {
                screen: 'SignUpStepVerifyPhoneNumber',
              });
            }}
          />
        </View>
      </ContentContainer>
    </MyScreenContainer>
  );
}

export function SignUpStepVerifyPhoneNumber() {
  const lang = useSelector(
    (state: RootState) => state.appVariables.lang.registration,
  );
  const currentTheme = useSelector(
    (state: RootState) => state.nonSaveVariables.theme.colors,
  );
  const navigation = useNavigation<RootScreenNavigationProp>();

  return (
    <MyScreenContainer
      style={{
        flexDirection: 'column',
      }}>
      <ContentContainer>
        <Title
          text={lang.signUpStepVerifyPhoneNumber.title}
          description={`${lang.signUpStepVerifyPhoneNumber.description} +49 15** ******43`}
        />

        <View style={{gap: 12, marginTop: 20}}>
          <ConfirmationCodeInput />

          <MyButton
            type="secondary"
            text={lang.buttonNext}
            style={{marginBottom: 2}}
            onPress={() => {
              navigation.navigate('Registration', {
                screen: 'SignUpStepPassword',
              });
            }}
          />
          <View style={{alignItems: 'center'}}>
            <MyClickableText
              text={lang.signUpStepVerifyPhoneNumber.clickableTextResendCode}
              color={currentTheme.textLight400}
            />
          </View>
        </View>
      </ContentContainer>
    </MyScreenContainer>
  );
}
*/
export function SignUpStepPassword() {
  const lang = useSelector(
    (state: RootState) => state.appVariables.lang.registration,
  );
  const navigation = useNavigation<RootScreenNavigationProp>();

  const registerProcess = useSelector(
    (state: RootState) => state.appVariables.preferences.RegisterProcess,
  );

  const [password, setPassword] = useState('');

  return (
    <MyScreenContainer
      style={{
        flexDirection: 'column',
      }}>
      <ContentContainer>
        <Title
          text={lang.signUpStepPassword.title}
          description={lang.signUpStepPassword.description}
        />

        <View style={{gap: 12, marginTop: 20}}>
          <MyIconInput
            text={lang.signUpStepPassword.inputPassword}
            iconName="lock"
            secureTextEntry
            value={password}
            onChangeText={text => setPassword(text)}
          />

          <MyButton
            type="secondary"
            text={lang.buttonNext}
            style={{marginBottom: 2}}
            onPress={() => {
              let rp = {...registerProcess};

              rp.Password = ToBase64(password);

              store.dispatch(appVarActions.setRegisterProcess(rp));

              navigation.navigate('Registration', {
                screen: 'SignUpStepAccountName',
              });
            }}
          />
        </View>
      </ContentContainer>
    </MyScreenContainer>
  );
}

export function SignUpStepAccountName() {
  const lang = useSelector(
    (state: RootState) => state.appVariables.lang.registration,
  );
  const navigation = useNavigation<RootScreenNavigationProp>();

  const registerProcess = useSelector(
    (state: RootState) => state.appVariables.preferences.RegisterProcess,
  );

  const [isLoading, setIsLoading] = useState(false);
  const [accountName, setAccountName] = useState('');

  return (
    <MyScreenContainer
      scrollView
      style={{
        flexDirection: 'column',
      }}>
      <ContentContainer>
        <Title
          text={lang.signUpStepAccountName.title}
          description={lang.signUpStepAccountName.description}
        />

        <View style={{gap: 12, marginTop: 20}}>
          <MyIconInput
            text={lang.signUpStepAccountName.inputAccountName}
            iconName="person"
            value={accountName}
            onChangeText={text => setAccountName(text)}
          />

          <MyButton
            type="primary"
            text={lang.signUpStepAccountName.buttonGetStarted}
            style={{marginBottom: 2}}
            isLoading={isLoading}
            onPress={() => {
              let rp = {...registerProcess};

              rp.AccountName = accountName;

              store.dispatch(appVarActions.setRegisterProcess(rp));

              console.log('registerProcess', rp);

              makeRequest({
                path: apiBackendRequest.SIGN_UP,
                request: rp,
                method: 'POST',
                response: {
                  XAuthorization: '',
                  Username: '',
                },
              })
                .then(resp => {
                  console.log('response', resp);

                  MyUserManager.createNewMyUser(
                    accountName,
                    resp.response.Username,
                    resp.response.XAuthorization,
                  )
                    .then(async () => {
                      setIsLoading(false);
                      navigateToHome(navigation);
                    })
                    .catch(err => {
                      console.log('catch', err);
                    });
                })
                .catch(error => {
                  console.log('error', error);
                });
            }}
          />
        </View>
      </ContentContainer>
    </MyScreenContainer>
  );
}
