import React from "react";
import { View, TouchableOpacity, Text } from "react-native";
import * as Haptics from "expo-haptics";

import { gutters, Palette, Style } from "../styles";
import useLayoutType from "../hooks/useLayoutType";
import BorderGradient from "../components/BorderGradient/BorderGradient";
import { colors } from "react-native-swiper-flatlist/src/themes";
import { BlurView } from "expo-blur";
import ItemContainer from "../components/ItemContainer/ItemContainer";
import { FONT_FAMILY } from "../styles/Fonts";

const TabBar = ({ state = {}, descriptors = {}, navigation = {} }) => {
  const { isDesktop, windowWidth, mediumDesktopBreakpoint, isWeb } =
    useLayoutType();

  return (
    <View
      style={{
        position: "absolute",
        bottom: gutters * 2,
        width: "90%",
        alignSelf: "center",
        zIndex: 1,
        justifyContent: "center",
      }}
    >
      <ItemContainer
        height={64}
        gradientProps={{
          start: { x: 0, y: 0 },
          end: { x: 1, y: 0 },
        }}
        style={{
          height: 65,
        }}
      >
        <View
          style={{
            ...Style.containerSpaceBetween,
            paddingHorizontal: 4,
            flex: 1,
          }}
        >
          {state?.routes?.map((route, index) => {
            const { options } = descriptors[route.key];
            const isFocused = state?.index === index;

            const label =
              options.tabBarLabel !== undefined
                ? options.tabBarLabel
                : options.title !== undefined
                ? options.title
                : route.name;

            const _onPressTabBar = () => {
              if (!isWeb) {
                Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
              }

              const event = navigation.emit({
                type: "tabPress",
                target: route.key,
                canPreventDefault: true,
              });

              if (!isFocused && !event.defaultPrevented) {
                // The `merge: true` option makes sure that the params inside the tab screen are preserved
                navigation.navigate({ name: route.name, merge: true });
              }
            };

            const onLongPress = () => {
              navigation.emit({
                type: "tabLongPress",
                target: route.key,
              });
            };

            return (
              !options?.hide && (
                <TouchableOpacity
                  key={route.key}
                  style={{
                    alignSelf: "center",
                    width: `${100 / state?.routes?.length}%`,
                    height: "100%",
                    ...Style.containerCenter,
                  }}
                  accessibilityRole="button"
                  accessibilityState={isFocused ? { selected: true } : {}}
                  accessibilityLabel={options.tabBarAccessibilityLabel}
                  testID={options.tabBarTestID}
                  onPress={_onPressTabBar}
                  onLongPress={onLongPress}
                >
                  {options?.tabBarIcon({ focused: isFocused })}
                  <Text
                    style={{
                      fontSize: 10,
                      color: isFocused ? Palette.white : "#8B8883",
                      fontFamily: FONT_FAMILY.HelveticaNeueRegular,
                      marginTop: 2,
                    }}
                  >
                    {label}
                  </Text>
                </TouchableOpacity>
              )
            );
          })}
        </View>
      </ItemContainer>
    </View>
  );
};

export default TabBar;
