import React, { Dispatch, SetStateAction, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import {
  NativeScrollEvent,
  NativeSyntheticEvent,
  ScrollView,
  StyleSheet,
  Text,
  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' },
  // { label: 'Qabul qilingan', value: 'DELIVERED' },
];

const Tabs = ({ filter, setFilter }: Props) => {
  const { width: screenWidth } = useWindowDimensions();
  const scale = screenWidth < 360 ? 0.85 : 1;
  const styles = makeStyles(scale);
  const scrollRef = useRef<ScrollView>(null);
  const [scrollX, setScrollX] = useState(0);
  const { t } = useTranslation();
  const scrollStep = 120;

  const handleScrollLeft = () => {
    if (scrollRef.current) {
      scrollRef.current.scrollTo({
        x: Math.max(0, scrollX - scrollStep),
        animated: true,
      });
    }
  };

  const handleScrollRight = () => {
    if (scrollRef.current) {
      scrollRef.current.scrollTo({ x: 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>

      <ScrollView
        horizontal
        onScroll={onScroll}
        ref={scrollRef}
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={styles.scrollContent}
      >
        {tabList.map(tab => (
          <TouchableOpacity
            key={tab.value}
            style={[styles.card, filter === tab.value && styles.activeCard]}
            onPress={() => setFilter(tab.value)}
          >
            <Text
              style={[styles.text, filter === tab.value && styles.activeText]}
            >
              {t(tab.label)}
            </Text>
          </TouchableOpacity>
        ))}
      </ScrollView>

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

const makeStyles = (scale: number) =>
  StyleSheet.create({
    container: {
      flexDirection: 'row',
      alignItems: 'center',
      width: '95%',
      height: 50 * scale,
      backgroundColor: '#FFFFFF',
      marginTop: 20 * scale,
      alignSelf: 'center',
      borderRadius: 8 * scale,
      paddingHorizontal: 4 * scale,
    },
    scrollContent: {
      flexDirection: 'row',
      alignItems: 'center',
      paddingHorizontal: 4 * scale,
    },
    card: {
      paddingHorizontal: 12 * scale,
      paddingVertical: 8 * scale,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: '#F3FAFF',
      marginRight: 8 * scale,
      borderRadius: 8 * scale,
    },
    activeCard: {
      backgroundColor: '#28A7E8',
    },
    text: {
      color: '#28A7E8',
      fontWeight: '500',
      fontSize: 14 * scale,
    },
    activeText: {
      color: '#fff',
    },
    navButton: {
      padding: 6 * scale,
    },
  });

export default Tabs;
