import React, { ReactChild } from "react";
import { View, StyleSheet } from "react-native";

export type ItemProps = {
  backgroundColor: string;
  focusedBackgroundColor: string;
  selectedBackgroundColor?: string;
  focusedSelectedBackgroundColor?: string;
  borderRadius: number;
  marginBottom: number;
  marginLeft: number;
  marginRight: number;
  marginTop: number;
  paddingTop: number;
  paddingBottom: number;
  paddingRight: number;
  paddingLeft: number;
  maxWidth: number;
  focused?: boolean;
  selected?: boolean;
  children?: ReactChild[];
};

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    justifyContent: "space-between",
  },
});

function getBackgroundColor({
  selected,
  focused,
  backgroundColor,
  focusedBackgroundColor,
  selectedBackgroundColor,
  focusedSelectedBackgroundColor,
}) {
  switch (true) {
    case selected && focused:
      return focusedSelectedBackgroundColor;
    case selected && !focused:
      return selectedBackgroundColor;
    case !selected && focused:
      return focusedBackgroundColor;
    default:
      return backgroundColor;
  }
}

export function Item(props: ItemProps) {
  const {
    backgroundColor,
    focusedBackgroundColor,
    focusedSelectedBackgroundColor,
    selectedBackgroundColor,
    children,
    focused,
    selected,
    ...itemStyles
  } = props;

  return (
    <View
      style={[
        styles.container,
        itemStyles,
        {
          backgroundColor: getBackgroundColor({
            selected,
            focused,
            focusedSelectedBackgroundColor,
            focusedBackgroundColor,
            selectedBackgroundColor,
            backgroundColor,
          }),
        },
      ]}
    >
      {children}
    </View>
  );
}