import React, { useCallback, useMemo } from "react";
import { Text, View } from "react-native";
import { textTransform } from "@applicaster/zapp-react-native-utils/cellUtils";
import { getStyleKey } from "./utils";

type Props = {
  id: string;
  item: ZappEntry;
  focused: boolean;
  selected: boolean;
  styles: Partial<TVTabsStyles>;
  config: PlatformConfiguration;
};

const Tab = ({ id, item, focused, selected, styles, config }: Props) => {
  const extraItemStyles = useMemo(
    () => styles[getStyleKey({ styleKey: "item", focused, selected })],
    [focused, selected]
  );

  const extraContainerStyles = useMemo(
    () =>
      styles[getStyleKey({ styleKey: "text_container", focused, selected })],
    [focused, selected]
  );

  const extraTextStyles = useMemo(
    () => styles[getStyleKey({ styleKey: "text", focused, selected })],
    [focused, selected]
  );

  const extraUnderlineStyles = useMemo(
    () => styles[getStyleKey({ styleKey: "underline", focused, selected })],
    [focused, selected]
  );

  const renderText = useCallback(() => {
    const textItem = textTransform(config.text_transform, item.title);

    return config.text_label_enabled ? textItem : null;
  }, [item.title]);

  return (
    <View testID={id} style={[styles.item, extraItemStyles]}>
      <View style={[styles.textContainer, extraContainerStyles]}>
        <Text style={[styles.text, extraTextStyles]} numberOfLines={1}>
          {renderText()}
        </Text>
      </View>
      <View style={[styles.textUnderline, extraUnderlineStyles]} />
    </View>
  );
};

export default Tab;