import AppText from 'components/AppText';
import React, { Dispatch, SetStateAction, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import {
  FlatList,
  NativeScrollEvent,
  NativeSyntheticEvent,
  StyleSheet,
  TouchableOpacity,
  View,
  useWindowDimensions,
} from 'react-native';
import ArrowLeft from 'svg/ArrowLeft';
import ArrowRightUnderline from 'svg/ArrowRightUnderline';

type FilterType =
  | 'COLLECTING'
  | 'ON_THE_WAY'
  | 'IN_CUSTOMS'
  | 'IN_WAREHOUSE'
  | 'DELIVERED'
  | 'PAID';

interface Props {
  filter: FilterType;
  setFilter: Dispatch<SetStateAction<FilterType>>;
}

const tabList: { label: string; value: FilterType }[] = [
  { label: "Yig'ilmoqda", value: 'COLLECTING' },
  { label: "Yo'lda", value: 'ON_THE_WAY' },
  { label: 'Bojxonada', value: 'IN_CUSTOMS' },
  { label: 'Toshkent omboriga yetib keldi', value: 'IN_WAREHOUSE' },
  { label: 'Topshirish punktiga yuborildi', value: 'DELIVERED' },
];

const Tabs = ({ filter, setFilter }: Props) => {
  const { width: screenWidth } = useWindowDimensions();
  const cardWidth = screenWidth * 0.95;
  const styles = makeStyles();
  const flatListRef = useRef<FlatList>(null);
  const [scrollX, setScrollX] = useState(0);
  const { t } = useTranslation();
  const scrollStep = 120;

  const handleScrollLeft = () => {
    flatListRef.current?.scrollToOffset({
      offset: Math.max(0, scrollX - scrollStep),
      animated: true,
    });
  };

  const handleScrollRight = () => {
    flatListRef.current?.scrollToOffset({
      offset: scrollX + scrollStep,
      animated: true,
    });
  };

  const onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
    setScrollX(event.nativeEvent.contentOffset.x);
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.navButton} onPress={handleScrollLeft}>
        <ArrowLeft color="#28A7E8" width={20} height={20} />
      </TouchableOpacity>

      <FlatList
        ref={flatListRef}
        horizontal
        data={tabList}
        keyExtractor={item => item.value}
        showsHorizontalScrollIndicator={false}
        onScroll={onScroll}
        renderItem={({ item }) => (
          <TouchableOpacity
            style={[styles.card, filter === item.value && styles.activeCard]}
            onPress={() => setFilter(item.value)}
          >
            <AppText
              style={[styles.text, filter === item.value && styles.activeText]}
            >
              {t(item.label)}
            </AppText>
          </TouchableOpacity>
        )}
        contentContainerStyle={styles.scrollContent}
      />

      <TouchableOpacity style={styles.navButton} onPress={handleScrollRight}>
        <ArrowRightUnderline color="#28A7E8" width={20} height={20} />
      </TouchableOpacity>
    </View>
  );
};

const makeStyles = () =>
  StyleSheet.create({
    container: {
      flexDirection: 'row',
      alignItems: 'center',
      width: '95%',
      height: 50,
      backgroundColor: '#FFFFFF',
      marginTop: 10,
      alignSelf: 'center',
      borderRadius: 8,
      paddingHorizontal: 4,
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 1 },
      shadowOpacity: 0.1,
      shadowRadius: 2,

      elevation: 1,
    },
    scrollContent: {
      flexDirection: 'row',
      alignItems: 'center',
      paddingHorizontal: 4,
    },
    card: {
      paddingHorizontal: 12,
      paddingVertical: 8,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: '#F3FAFF',
      marginRight: 8,
      borderRadius: 8,
    },
    activeCard: {
      backgroundColor: '#28A7E8',
    },
    text: {
      color: '#28A7E8',
      fontWeight: '500',
      fontSize: 14,
    },
    activeText: {
      color: '#fff',
    },
    navButton: {
      padding: 6,
    },
  });

export default Tabs;