import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { useQuery } from '@tanstack/react-query';
import { branchApi } from 'api/branch';
import LayoutTwo from 'components/LayoutTwo';
import NavbarBack from 'components/NavbarBack';
import NoResult from 'components/NoResult';
import * as React from 'react';
import { useTranslation } from 'react-i18next';
import {
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import ArrowRightUnderline from 'svg/ArrowRightUnderline';

interface BranchesProps {}

const Branches = (props: BranchesProps) => {
  const navigation = useNavigation<NativeStackNavigationProp<any>>();
  const { t } = useTranslation();
  const { data, isError } = useQuery({
    queryKey: ['branchList'],
    queryFn: branchApi.branchList,
  });

  if (isError || data?.length === 0) {
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <View style={{ flex: 1 }}>
          <NavbarBack title={t('Filiallar ro’yxati')} />
          <NoResult message="Xatolik yuz berdi" />
        </View>
      </SafeAreaView>
    );
  }

  return (
    <LayoutTwo title={t('Filiallar ro’yxati')}>
      <View style={styles.scrollWrapper}>
        <ScrollView contentContainerStyle={styles.scrollContainer}>
          {data &&
            data.map(e => (
              <TouchableOpacity
                key={e.id}
                style={styles.card}
                onPress={() =>
                  navigation.navigate('ListBranches', { branchId: e.id })
                }
              >
                <View>
                  <Text style={styles.title}>{e.name}</Text>
                  <Text style={styles.subtitle}>{e.address}</Text>
                </View>
                <ArrowRightUnderline color="#28A7E8" />
              </TouchableOpacity>
            ))}
        </ScrollView>
      </View>
    </LayoutTwo>
  );
};

export default Branches;

const styles = StyleSheet.create({
  scrollWrapper: {
    flex: 1,
  },
  scrollContainer: {
    padding: 8,
  },
  card: {
    backgroundColor: '#FFFFFF',
    borderRadius: 8,
    padding: 4,
    marginBottom: 12,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 2,

    elevation: 1,
  },
  title: {
    fontSize: 18,
    paddingHorizontal: 5,
    fontWeight: '600',
    color: '#000',
    marginBottom: 6,
  },
  subtitle: {
    fontSize: 16,
    paddingHorizontal: 5,
    fontWeight: '500',
    color: '#000000B2',
  },
});