import { useRef, useState } from "react";
import BottomSheet, {
  BottomSheetFlatList,
  BottomSheetScrollView,
  BottomSheetView,
} from "@gorhom/bottom-sheet";
import {
  Text,
  StyleSheet,
  ScrollView,
  View,
  TouchableOpacity,
} from "react-native";
import { LIGHT_THEME } from "../../common/const/theme";
import { router } from "expo-router";
import { ActivityInfoEntity } from "../domain/entities/activity_info_entity";
import { useTranslation } from "react-i18next";

interface ActivityBottomSheetProps {
  startSnapPoint: number;
  snapPoints: string[];
  onSnapPointChange?: (index: number) => void;
  activity: ActivityInfoEntity;
}

export const ActivityBottomSheet = ({
  activity,
  startSnapPoint,
  snapPoints,
  onSnapPointChange,
}: ActivityBottomSheetProps) => {
  const sheetRef = useRef<BottomSheet>(null);
  const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false);
  const { t } = useTranslation();

  return (
    <BottomSheet
      ref={sheetRef}
      index={startSnapPoint}
      onChange={onSnapPointChange}
      snapPoints={snapPoints}
    >
      <BottomSheetScrollView
        style={{ height: "100%", padding: 10 }}
        scrollToOverflowEnabled
        nestedScrollEnabled
      >
        <View style={styles.activity_name_container}>
          <Text style={styles.name_text}>{activity.name}</Text>
          <TouchableOpacity
            onPress={() => {
              router.push("/scan");
            }}
            style={styles.do_activity_button}
          >
            <Text style={styles.do_activity_text}>
              {t("activityInfoScreen.doActivityButton")}
            </Text>
          </TouchableOpacity>
        </View>
        {activity.tags && (
          <BottomSheetFlatList
            style={{ marginTop: 20, paddingVertical: 10 }}
            horizontal
            data={activity.tags}
            showsHorizontalScrollIndicator={false}
            keyExtractor={(item) => item}
            ItemSeparatorComponent={() => <View style={{ width: 10 }} />}
            renderItem={({ item }) => (
              <View
                style={{
                  height: 40,
                  borderRadius: 15,
                  backgroundColor: "violet",
                  paddingHorizontal: 10,
                  justifyContent: "center",
                }}
              >
                <Text>{item}</Text>
              </View>
            )}
          />
        )}
        <View style={styles.description_container}>
          <Text style={styles.description_text}>
            {t("activityInfoScreen.descriptionText")}
          </Text>
          <Text numberOfLines={!isDescriptionExpanded ? 5 : undefined}>
            {activity.description}
          </Text>
          <TouchableOpacity
            onPress={() => setIsDescriptionExpanded(!isDescriptionExpanded)}
          >
            <Text style={styles.show_more_text}>
              {isDescriptionExpanded
                ? t("activityInfoScreen.showLessButton")
                : t("activityInfoScreen.showMoreButton")}
            </Text>
          </TouchableOpacity>
        </View>
      </BottomSheetScrollView>
    </BottomSheet>
  );
};

const styles = StyleSheet.create({
  activity_info_container: {
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    borderWidth: 5,
    padding: 20,
  },
  activity_name_container: {
    width: "100%",
    flexDirection: "row",
    justifyContent: "space-between",
  },
  name_text: {
    fontSize: 24,
    fontWeight: "bold",
    width: "70%",
  },
  do_activity_button: {
    height: 40,
    elevation: 5,
    backgroundColor: LIGHT_THEME.color.primary,
    padding: 10,
    borderRadius: 20,
    marginLeft: -40,
    justifyContent: "center",
    alignItems: "center",
    paddingHorizontal: 20,
  },
  do_activity_text: {
    color: LIGHT_THEME.color.white,
    fontWeight: "bold",
  },
  description_container: {
    marginTop: 20,
    gap: 5,
  },
  description_text: {
    fontSize: 18,
    fontWeight: "bold",
  },
  show_more_text: {
    fontWeight: "600",
  },
});
