import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import NavbarBack from 'components/NavbarBack';
import {
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import ArrowRightUnderline from 'svg/ArrowRightUnderline';

const SettingsLock = () => {
  const navigation = useNavigation<NativeStackNavigationProp<any>>();
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={styles.container}>
        <NavbarBack title="Parol o'rnatish" />
        <ScrollView>
          <View style={{ width: '95%', margin: 'auto', marginTop: 20 }}>
            <Text style={styles.title}>Parol turini tanlang</Text>
            <TouchableOpacity
              style={[styles.card]}
              onPress={() =>
                navigation.navigate('AddLock', { lockType: 'pin' })
              }
            >
              <Text style={styles.label}>Pin-kod</Text>
              <ArrowRightUnderline color="#383838" />
            </TouchableOpacity>

            <TouchableOpacity
              style={[styles.card]}
              onPress={() =>
                navigation.navigate('AddLock', { lockType: 'password' })
              }
            >
              <Text style={styles.label}>Parol</Text>
              <ArrowRightUnderline color="#383838" />
            </TouchableOpacity>

            <TouchableOpacity
              style={[styles.card]}
              onPress={() =>
                navigation.navigate('AddLock', { lockType: 'pattern' })
              }
            >
              <Text style={styles.label}>Chizma</Text>
              <ArrowRightUnderline color="#383838" />
            </TouchableOpacity>
          </View>
        </ScrollView>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  title: {
    fontSize: 16,
    fontWeight: '500',
  },
  label: {
    fontWeight: '400',
    fontSize: 16,
  },
  card: {
    backgroundColor: '#FFFFFF',
    shadowColor: '#F3FAFF',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.3,
    shadowRadius: 4,
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: 15,
    marginTop: 10,
    borderRadius: 10,
    alignItems: 'center',
  },
});

export default SettingsLock;
