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

export type ItemLabelProps = {
  label?: string | Record<string, string>;
  fontFamily: string;
  letterSpacing: number;
  fontSize: number;
  color: string;
  focusColor: string;
  selectedColor?: string;
  hoverSelectedColor?: string;
  lineHeight: number;
  marginBottom: number;
  marginTop: number;
  marginLeft: number;
  marginRight: number;
  transform: string;
  maxWidth: number;
  focused?: boolean;
  selected?: boolean;
};

const styles = StyleSheet.create({
  container: {
    justifyContent: "center",
  },
});

function getColor({
  selected,
  focused,
  color,
  selectedColor,
  focusColor,
  hoverSelectedColor,
}) {
  switch (true) {
    case selected && focused:
      return hoverSelectedColor;
    case selected && !focused:
      return selectedColor;
    case !selected && focused:
      return focusColor;
    default:
      return color;
  }
}

export function ItemLabel(props: ItemLabelProps) {
  const {
    label,
    fontFamily,
    letterSpacing,
    fontSize,
    color,
    selectedColor,
    focusColor,
    hoverSelectedColor,
    lineHeight,
    marginBottom,
    marginTop,
    marginLeft,
    marginRight,
    transform,
    maxWidth,
    focused,
    selected,
  } = props;

  return (
    <View
      style={[
        styles.container,
        { marginBottom, marginLeft, marginRight, marginTop, maxWidth },
      ]}
    >
      <Text
        style={{
          fontFamily,
          fontSize,
          letterSpacing,
          color: getColor({
            selected,
            focused,
            color,
            selectedColor,
            hoverSelectedColor,
            focusColor,
          }),
          lineHeight,
        }}
        numberOfLines={1}
        ellipsizeMode="tail"
      >
        {textTransform(transform, label)}
      </Text>
    </View>
  );
}