import Ionicons from "@expo/vector-icons/Ionicons";
import {
  DrawerContentComponentProps,
  DrawerContentScrollView,
  DrawerItem,
} from "@react-navigation/drawer";
import { Href, useNavigation, useRouter, useSegments } from "expo-router";
import { Drawer } from "expo-router/drawer";
import {
  memo,
  useCallback,
  useLayoutEffect,
  useMemo,
  useState,
} from "react";
import {
  Image,
  ImageSourcePropType,
  Pressable,
  StyleSheet,
  View,
} from "react-native";
import { IoniconsType } from "../../lib/types";

export type CustomDrawerRoute = {
  name: string;
  href: string;
  icon?: IoniconsType;
};

const styles = StyleSheet.create({
  logo: {
    width: 107,
    height: 20,
    resizeMode: "contain",
  },
});

const DrawerHeader = memo(
  ({
    onClose,
    LOGO_SOURCE,
  }: {
    onClose: () => void;
    LOGO_SOURCE: ImageSourcePropType;
  }) => (
    <View className="-mx-4 mb-2 flex-row items-center justify-between border-b border-gray-100 px-8 pb-4">
      <Image source={LOGO_SOURCE} style={styles.logo} />
      <Pressable onPress={onClose} hitSlop={8}>
        <Ionicons name="close" size={20} color="#000" />
      </Pressable>
    </View>
  )
);

const CustomDrawerItem = memo(
  ({
    route,
    isActive,
    onPress,
  }: {
    route: CustomDrawerRoute;
    isActive: boolean;
    onPress: () => void;
  }) => (
    <DrawerItem
      key={route.name}
      icon={({ color }) => (
        <Ionicons size={20} name={route.icon as any} color={color} />
      )}
      label={route.name}
      focused={isActive}
      onPress={onPress}
      activeTintColor="#DC2626"
      activeBackgroundColor="#FEE2E2"
      inactiveTintColor="#6B7280"
    />
  )
);

const StaticDrawerItem = memo(
  ({
    name,
    icon,
    onPress,
  }: {
    name: string;
    href: string;
    icon: string;
    onPress: () => void;
  }) => (
    <DrawerItem
      icon={({ color }) => (
        <Ionicons size={20} name={icon as any} color={color} />
      )}
      label={name}
      onPress={onPress}
    />
  )
);

const DrawerContent = memo(
  ({
    state,
    navigation,
    FooterContent,
    CUSTOM_DRAWER_ROUTES,
    STATIC_ROUTES,
    LOGO_SOURCE,
    ...rest
  }: DrawerContentComponentProps & {
    CUSTOM_DRAWER_ROUTES: CustomDrawerRoute[];
    STATIC_ROUTES: Required<CustomDrawerRoute>[];
    FooterContent?: React.ReactNode;
    LOGO_SOURCE: ImageSourcePropType;
  }) => {
    const router = useRouter();
    const segments = useSegments();
    const focusedRoute = state.routes[state.index];
    const focusedDescriptor = rest.descriptors[focusedRoute.key];
    const focusedOptions = focusedDescriptor.options;

    const currentRoute = useMemo(() => {
      return "/" + segments.slice(1).join("/");
    }, [segments]);

    const isRouteActive = useCallback(
      (href: string) => {
        if (currentRoute === href) return true;

        if (href !== "/(tabs)" && currentRoute.startsWith(href))
          return true;

        if (
          href === "/(tabs)/tags/list-tags" &&
          currentRoute.includes("/tags/")
        )
          return true;

        return false;
      },
      [currentRoute]
    );

    const handleCloseDrawer = useCallback(() => {
      navigation.closeDrawer();
    }, [navigation]);

    const handleRoutePress = useCallback(
      (href: string) => {
        router.push(href as Href);
      },
      [router]
    );

    const { drawerContentStyle, drawerContentContainerStyle } =
      focusedOptions;

    return (
      <View style={{ flex: 1 }}>
        <DrawerContentScrollView
          {...rest}
          contentContainerStyle={[
            drawerContentContainerStyle,
            { flexGrow: 1 },
          ]}
          style={drawerContentStyle}
        >
          <DrawerHeader
            onClose={handleCloseDrawer}
            LOGO_SOURCE={LOGO_SOURCE}
          />

          {CUSTOM_DRAWER_ROUTES.map((route) => (
            <CustomDrawerItem
              key={route.href}
              route={route}
              isActive={isRouteActive(route.href)}
              onPress={() => handleRoutePress(route.href)}
            />
          ))}

          {STATIC_ROUTES.map((route) => (
            <StaticDrawerItem
              key={route.href}
              name={route.name}
              href={route.href}
              icon={route.icon}
              onPress={() => handleRoutePress(route.href)}
            />
          ))}

          <View className="flex-1" />
        </DrawerContentScrollView>

        {FooterContent}
      </View>
    );
  }
);

const useRouteTitle = ({
  ALL_ROUTES,
}: {
  ALL_ROUTES: CustomDrawerRoute[];
}) => {
  const segments: string[] = useSegments();
  const navigation = useNavigation();
  const [title, setTitle] = useState(ALL_ROUTES[0].name);

  const findRouteByHref = (href: string) =>
    ALL_ROUTES.find((route) => route.href === href);

  useLayoutEffect(() => {
    const activeRoute = "/" + segments.slice(1).join("/");

    let route = findRouteByHref(activeRoute);

    if (!route) {
      route = ALL_ROUTES.find((r) =>
        activeRoute.startsWith(r.href.replace(/\/[^/]*$/, ""))
      );
    }

    if (!route && segments.length >= 2) {
      const mainSection = `/(tabs)/${segments[1]}`;
      route = ALL_ROUTES.find((r) => r.href.startsWith(mainSection));
    }

    if (route) {
      setTitle(route.name);
      navigation.setOptions({
        headerTitle: route.name,
      });
    }
  }, [segments, navigation]);

  return title;
};

export function MainDrawer({
  ALL_ROUTES,
  STATIC_ROUTES,
  CUSTOM_DRAWER_ROUTES,
  FooterContent,
  HeaderRight,
  LOGO_SOURCE,
}: {
  ALL_ROUTES: CustomDrawerRoute[];
  STATIC_ROUTES: Required<CustomDrawerRoute>[];
  CUSTOM_DRAWER_ROUTES: CustomDrawerRoute[];
  FooterContent?: React.ReactNode;
  HeaderRight?: React.ReactNode;
  LOGO_SOURCE: ImageSourcePropType;
}) {
  const title = useRouteTitle({ ALL_ROUTES });

  const drawerContent = useCallback(
    (props: DrawerContentComponentProps) => (
      <DrawerContent
        {...props}
        CUSTOM_DRAWER_ROUTES={CUSTOM_DRAWER_ROUTES}
        FooterContent={FooterContent}
        STATIC_ROUTES={STATIC_ROUTES}
        LOGO_SOURCE={LOGO_SOURCE}
      />
    ),
    [CUSTOM_DRAWER_ROUTES]
  );

  const screenOptions = useMemo(
    () => ({
      headerStatusBarHeight: 0,
      drawerContentContainerStyle: { paddingTop: 20, flex: 1 },
      headerTitleStyle: { fontSize: 16 },
      headerStyle: { height: 50 },
      headerRight: () => HeaderRight,
    }),
    [HeaderRight]
  );

  const drawerScreenOptions = useMemo(
    () => ({
      title,
      drawerLabel: "Home",
    }),
    [title]
  );

  return (
    <Drawer drawerContent={drawerContent} screenOptions={screenOptions}>
      <Drawer.Screen name="(tabs)" options={drawerScreenOptions} />
    </Drawer>
  );
}