/* eslint-disable react-native/no-unused-styles */
import React from "react";
import * as R from "ramda";
import { View, Text, StyleSheet, TouchableWithoutFeedback } from "react-native";
import { useConfiguration } from "@applicaster/zapp-react-native-utils/reactHooks/configuration";
import {
  getStyleForPlatform,
  applyStringTransformation,
} from "@applicaster/zapp-react-native-utils/configurationUtils";

type Props = {
  title: string;
  id: number | string;
  selected: ZappEntry;
  handleOnPress: () => void;
};

const getStyles = (configuration, selected, focused) => {
  const {
    tab_cell_background_color_default,
    tab_cell_background_color_active,
    tab_cell_background_color_selected_default,
    tab_cell_background_color_selected_active,
    tab_cell_padding_top,
    tab_cell_padding_right,
    tab_cell_padding_bottom,
    tab_cell_padding_left,
    tab_cell_border_radius,
    tab_cell_border_width,
    tab_cell_border_color_default,
    tab_cell_border_color_default_focused,
    tab_cell_border_color_active,
    tab_cell_border_color_active_focused,
    tab_cell_indicator_height,
    tab_cell_indicator_color,
    tab_cell_indicator_border_radius,
    tab_bar_padding_top,
    tab_bar_padding_bottom,
    display_mode,
    display_mode_tab_width,
    text_label_line_height,
    text_label_font_size,
    text_label_default_font_color,
    text_label_active_font_color,
    text_label_selected_default_font_color,
    text_label_selected_active_font_color,
  } = configuration;

  const getStylesForKey = getStyleForPlatform(configuration);

  const [text_label_font_family, text_label_letter_spacing] = R.map(
    getStylesForKey
  )([
    ["text_label", "font_family"],
    ["text_label", "letter_spacing"],
  ]);

  return StyleSheet.create({
    container: {
      flex: 1,
      width: display_mode === "fixed" ? display_mode_tab_width : undefined,
      flexBasis: display_mode === "fractional" ? 1 : undefined,
      paddingTop: tab_bar_padding_top,
      paddingBottom: tab_bar_padding_bottom,
    },
    tabContainer: {
      backgroundColor: selected
        ? focused
          ? tab_cell_background_color_selected_active
          : tab_cell_background_color_selected_default
        : focused
          ? tab_cell_background_color_active
          : tab_cell_background_color_default,
      justifyContent: "center",
      alignItems: "center",
      position: "relative",
      paddingTop: tab_cell_padding_top,
      paddingRight: tab_cell_padding_right,
      paddingBottom: tab_cell_padding_bottom,
      paddingLeft: tab_cell_padding_left,
      borderRadius: tab_cell_border_radius,
      borderWidth: tab_cell_border_width,
      borderColor: selected
        ? focused
          ? tab_cell_border_color_active_focused
          : tab_cell_border_color_active
        : focused
          ? tab_cell_border_color_default_focused
          : tab_cell_border_color_default,
    },
    label: {
      fontFamily: text_label_font_family,
      fontSize: text_label_font_size,
      lineHeight: text_label_line_height,
      letterSpacing: text_label_letter_spacing,
      color: selected
        ? focused
          ? text_label_selected_active_font_color
          : text_label_selected_default_font_color
        : focused
          ? text_label_active_font_color
          : text_label_default_font_color,
    },
    underline: {
      position: "absolute",
      bottom: -tab_cell_border_width,
      left: 0,
      right: 0,
      height: tab_cell_indicator_height,
      backgroundColor: tab_cell_indicator_color,
      borderRadius: tab_cell_indicator_border_radius,
    },
  });
};

const Tab = ({ title, selected, handleOnPress }: Props, ref: any) => {
  const configuration = useConfiguration();
  const { text_label_text_transform } = configuration;
  const [focused, setIsFocused] = React.useState(false);

  const styles = React.useMemo(
    () => getStyles(configuration, selected, focused),
    [selected, focused]
  );

  const tabTitle = React.useMemo(
    () => applyStringTransformation(title, text_label_text_transform),
    [text_label_text_transform]
  );

  const handleOnPressIn = React.useCallback(() => {
    setIsFocused(true);
  }, []);

  const handleOnPressOut = React.useCallback(() => {
    setIsFocused(false);
  }, []);

  return (
    <TouchableWithoutFeedback
      onPressIn={handleOnPressIn}
      onPressOut={handleOnPressOut}
      onPress={handleOnPress}
    >
      <View style={styles.container}>
        <View style={styles.tabContainer} ref={ref}>
          <Text numberOfLines={1} style={styles.label}>
            {tabTitle}
          </Text>
          {selected && <View testID="underline" style={styles.underline} />}
        </View>
      </View>
    </TouchableWithoutFeedback>
  );
};

export default R.compose(React.memo, React.forwardRef)(Tab);