import {MyScreenContainer} from '@components/MyScreenContainer';
import {Image, ScrollView, TextInput, TouchableOpacity} from 'react-native';
import {Text, View} from 'react-native';

import Avatar from '@assets/profile.png';
import {MyTitle} from '@components/MyTitle';
import {MyVerticalDivider} from '@components/MyDivider';
import {MyIcon} from '@components/MyIcon';
import {useNavigation} from '@react-navigation/native';
import {ProfileScreenNavigationProp} from '@navigation/tabs/main/ProfileTab';
import {MyIconInput} from '@components/MyInput';
import {useEffect, useState} from 'react';
import {
  RootScreenNavigationProp,
  RootStackNavigatorParamList,
} from '@navigation/navigation';

function UserAvatar() {
  return (
    <Image
      source={Avatar}
      style={{height: 120, width: 120}}
      borderRadius={100}
    />
  );
}

export function ProfileOverview() {
  return (
    <MyScreenContainer
      style={{
        flexDirection: 'column',
        alignItems: 'center',
        paddingTop: 10,
      }}>
      <UserAvatar />

      <MyTitle text="Max Mustermann" />

      <View style={{flexDirection: 'row', gap: 12}}>
        <Statistic title="FOLLOWER" value="400.3k" />
        <MyVerticalDivider />
        <Statistic title="FOLLOWING" value="40.3k" />
        <MyVerticalDivider />
        <Statistic title="VISITED" value="2k" />
      </View>
    </MyScreenContainer>
  );
}

interface StatisticProps {
  value: string;
  title: string;
}

function Statistic({value, title}: StatisticProps) {
  return (
    <TouchableOpacity>
      <View>
        <Text
          style={{
            fontSize: 24,
            fontWeight: 'bold',
            color: '#931278',
            textAlign: 'center',
          }}>
          {value}
        </Text>
        <Text
          style={{
            fontSize: 14,
            fontWeight: 'bold',
            color: '#ccc',
            textAlign: 'center',
          }}>
          {title}
        </Text>
      </View>
    </TouchableOpacity>
  );
}

export function ProfileSettings() {
  const navigation = useNavigation<ProfileScreenNavigationProp>();

  const rootNavigation = useNavigation<RootScreenNavigationProp>();

  return (
    <ScrollView>
      <MyScreenContainer
        style={{
          paddingTop: 10,
        }}>
        <View style={{alignItems: 'center'}}>
          <UserAvatar />
        </View>

        <SettingsItemContainer title="ACCOUNT DATA">
          <SettingsItem
            icon="person"
            title="ACCOUNT NAME"
            value="max_mustermann"
          />

          <SettingsItem
            icon="person"
            title="USERNAME"
            value="Max Mustermann"
            onPress={() => navigation.navigate('UpdateUsername')}
          />

          <SettingsItem
            icon="phone-iphone"
            title="PHONE NUMBER"
            value="+49 1510 21334143"
          />
        </SettingsItemContainer>

        <SettingsItemContainer title="CHANGE PASSWORD">
          <SettingsItem
            icon="lock"
            title="PASSWORD"
            value="Tap to change"
            onPress={() => navigation.navigate('UpdatePassword')}
          />
        </SettingsItemContainer>

        <SettingsItemContainer title="MORE INFO">
          <SettingsItem
            icon="help"
            title="Help"
            onPress={() => navigation.navigate('Help')}
          />

          <SettingsItem
            icon="info"
            title="About"
            onPress={() => navigation.navigate('About')}
          />

          <SettingsItem
            icon="logout"
            title="Logout"
            onPress={() =>
              rootNavigation.navigate('Registration', {screen: 'LoginPreview'})
            }
          />
        </SettingsItemContainer>
      </MyScreenContainer>
    </ScrollView>
  );
}

interface SettingsItemContainerProps {
  children: React.ReactNode;
  title: string;
}

function SettingsItemContainer({children, title}: SettingsItemContainerProps) {
  return (
    <View style={{marginTop: 12}}>
      <Text style={{fontSize: 12}}>{title}</Text>
      <View
        style={{
          padding: 12,
          borderRadius: 10,
          backgroundColor: '#26263f',
          marginTop: 4,
          gap: 16,
        }}>
        {children}
      </View>
    </View>
  );
}

interface SettingsItemProps {
  icon: string;
  title: string;
  value?: string;
  onPress?: () => void;
}

function SettingsItem({icon, title, value, onPress}: SettingsItemProps) {
  return (
    <TouchableOpacity
      style={{
        flexDirection: 'row',
        alignItems: 'center',
      }}
      disabled={!onPress}
      onPress={onPress}>
      <View style={{flexDirection: 'row', gap: 12, alignItems: 'center'}}>
        <MyIcon name={icon} size={36} />
        <View>
          {value ? (
            <>
              <Text>{title}</Text>
              <Text style={{color: '#fff', fontWeight: 'bold', fontSize: 16}}>
                {value}
              </Text>
            </>
          ) : (
            <Text style={{color: '#fff', fontWeight: 'bold', fontSize: 16}}>
              {title}
            </Text>
          )}
        </View>
      </View>
    </TouchableOpacity>
  );
}

export function UpdateUsername() {
  // TODO: get username from current logged in user
  const username = 'Max Mustermann';

  const navigation = useNavigation<ProfileScreenNavigationProp>();
  const [newUsername, setNewUsername] = useState(username);

  useEffect(() => {
    const changed = username !== newUsername;

    navigation.setOptions({
      headerRight: () =>
        changed ? (
          <TouchableOpacity onPress={() => navigation.goBack()}>
            <MyIcon name="done" size={24} color={!changed ? '#fff' : '#ccc'} />
          </TouchableOpacity>
        ) : (
          <></>
        ),
    });
  }, [navigation, newUsername]);

  return (
    <MyScreenContainer style={{paddingTop: 20}}>
      <MyIconInput
        iconName="person"
        text="USERNAME"
        value={newUsername}
        onChangeText={text => {
          setNewUsername(text);
        }}
      />
      <Text style={{marginTop: 12}}>You can use a-z, 0-9 and underscores.</Text>
      <Text>Minimum length is 5 characters.</Text>
    </MyScreenContainer>
  );
}

export function UpdatePassword() {
  const navigation = useNavigation<RootScreenNavigationProp>();

  const [currentPassword, setCurrentPassword] = useState('');
  const [newPassword, setNewPassword] = useState('');
  const [repeatNewPassword, setRepeatNewPassword] = useState('');

  useEffect(() => {
    const passwordChanged =
      currentPassword.length > 0 &&
      newPassword.length > 0 &&
      repeatNewPassword.length > 0 &&
      newPassword === repeatNewPassword;

    navigation.setOptions({
      headerRight: () =>
        passwordChanged ? (
          <TouchableOpacity
            onPress={() =>
              navigation.navigate('Registration', {screen: 'LoginPreview'})
            }>
            <MyIcon name="done" size={24} color="#fff" />
          </TouchableOpacity>
        ) : (
          <></>
        ),
    });
  }, [navigation, currentPassword, newPassword, repeatNewPassword]);

  return (
    <MyScreenContainer style={{paddingTop: 20}} scrollView>
      <View
        style={{
          borderRadius: 10,
          backgroundColor: '#26263f',
          marginTop: 4,
        }}>
        <MyIconInput
          iconName="lock"
          text="CURRENT PASSWORD"
          secureTextEntry={true}
          value={currentPassword}
          onChangeText={text => setCurrentPassword(text)}
          disableContainer
        />
        <MyIconInput
          iconName="lock"
          text="NEW PASSWORD"
          secureTextEntry={true}
          value={newPassword}
          onChangeText={text => setNewPassword(text)}
          disableContainer
        />
        <MyIconInput
          iconName="lock"
          text="REPEAT NEW PASSWORD"
          secureTextEntry={true}
          value={repeatNewPassword}
          onChangeText={text => setRepeatNewPassword(text)}
          disableContainer
        />
      </View>

      <Text style={{marginTop: 12}}>
        You will be logged out after changing your password.
      </Text>
    </MyScreenContainer>
  );
}
