import Clipboard from '@react-native-clipboard/clipboard';
import { getMeData } from 'api/auth/type';
import { myPassport } from 'api/passport';
import formatDate from 'helpers/formatData';
import React from 'react';
import { useTranslation } from 'react-i18next';
import {
  Dimensions,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import Toast from 'react-native-toast-message';
import Copy from 'svg/Copy';

const screenWidth = Dimensions.get('window').width;
const isSmallScreen = screenWidth < 200;

interface Props {
  myPassport: myPassport[];
  getMe: getMeData;
}

const MyPassport = ({ getMe, myPassport }: Props) => {
  const { t } = useTranslation();

  const handleCopy = (text: string) => {
    Clipboard.setString(text);
    Toast.show({
      type: 'success',
      text1: t('Nusxa olingan'),
      text2: t('Pochta kodi nusxalandi!'),
      position: 'top',
      visibilityTime: 2000,
    });
  };

  return (
    <View style={styles.container}>
      {myPassport &&
        myPassport.map(data => (
          <View style={styles.card} key={data.passportPin}>
            <Text style={styles.title}>{t('Passport ma’lumotlarim')}</Text>
            <View style={styles.infoCard}>
              <View
                style={[
                  styles.info,
                  isSmallScreen
                    ? { flexBasis: '100%', alignItems: 'flex-start' }
                    : { flexBasis: '35%', alignItems: 'flex-start' },
                ]}
              >
                <View style={styles.infoHeader}>
                  <Text style={styles.infoTitle}>{t('Tez ID')}</Text>
                  <TouchableOpacity
                    onPress={() =>
                      handleCopy((getMe && getMe?.aviaCargoId) || '')
                    }
                  >
                    <Copy color="#28A7E8" width={20} height={20} />
                  </TouchableOpacity>
                </View>
                <Text style={styles.infoText}>{getMe?.aviaCargoId}</Text>
              </View>

              <View
                style={[
                  styles.info,
                  isSmallScreen
                    ? { flexBasis: '100%', alignItems: 'flex-start' }
                    : { flexBasis: '65%', alignItems: 'flex-end' },
                ]}
              >
                <Text style={styles.infoTitle}>{t('JSHSHIR')}</Text>
                <Text style={styles.infoText}>{data.passportPin}</Text>
              </View>

              <View
                style={[
                  styles.info,
                  { flexBasis: '100%', alignItems: 'flex-start' },
                ]}
              >
                <Text style={styles.infoTitle}>{t('To’liq ismi')}</Text>
                <Text style={styles.infoText}>{data.fullName}</Text>
              </View>

              <View
                style={[
                  styles.info,
                  isSmallScreen
                    ? { flexBasis: '100%', alignItems: 'flex-start' }
                    : { flexBasis: '48%', alignItems: 'flex-start' },
                ]}
              >
                <Text style={styles.infoTitle}>{t('Passport seriya')}</Text>
                <Text style={styles.infoText}>{data.passportSeries}</Text>
              </View>

              <View
                style={[
                  styles.info,
                  isSmallScreen
                    ? { flexBasis: '100%', alignItems: 'flex-start' }
                    : { flexBasis: '48%', alignItems: 'flex-end' },
                ]}
              >
                <Text style={styles.infoTitle}>{t('Tug’ilgan kun')}</Text>
                <Text style={styles.infoText}>
                  {formatDate(data.birthDate)}
                </Text>
              </View>

              <View
                style={[
                  styles.info,
                  { flexBasis: '100%', alignItems: 'flex-start' },
                ]}
              >
                <Text style={[styles.infoTitle]}>{t('Telefon raqami')}</Text>
                <Text style={[styles.infoText]}>+{data.phone}</Text>
              </View>

              <View
                style={[
                  styles.info,
                  { flexBasis: '100%', alignItems: 'flex-end' },
                ]}
              >
                <Text
                  style={[
                    styles.infoTitle,
                    !isSmallScreen && { textAlign: 'right' },
                  ]}
                >
                  {t('Limit')}
                </Text>
                <Text
                  style={[
                    styles.infoText,
                    !isSmallScreen && { textAlign: 'right' },
                  ]}
                >
                  {data.availableLimit}$
                </Text>
              </View>
            </View>
          </View>
        ))}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    width: '95%',
    alignSelf: 'center',
    marginTop: 10,
  },
  card: {
    backgroundColor: '#FFFFFF',
    padding: 20,
    borderRadius: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 4,
    marginBottom: 20,
  },
  title: {
    fontSize: 18,
    fontWeight: '500',
    color: '#343434',
    marginBottom: 10,
  },
  infoCard: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
  },
  info: {
    marginBottom: 15,
    gap: 5,
  },
  infoTitle: {
    color: '#979797',
    fontSize: 16,
    fontWeight: '500',
  },
  infoText: {
    fontSize: 18,
    fontWeight: '500',
  },
  infoHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 20,
  },
});

export default MyPassport;
