import React, { useMemo, useState } from "react";
import { StyleSheet, TouchableOpacity, View } from "react-native";
import { Item, ItemProps } from "./Item";
import { ItemIcon, ItemIconProps } from "./ItemIcon";
import { ItemLabel, ItemLabelProps } from "./ItemLabel";
import { defaultSelectedAsset } from "./assets";

type ButtonProps = {
  configuration: any;
  selectedItem?: any;
  item: any; // Adjust type as needed
  onPress: (item: any) => void; // Adjust type as needed
  iconBaseProps?: ItemIconProps;
  itemBaseProps?: ItemProps;
  labelBaseProps?: ItemLabelProps;
  disabled?: boolean;
  label?: string | Record<string, string>;
  iconPlacement?: "left" | "right";
  selectedItemIcon?: ItemIconProps["asset"];
  defaultItemIcon?: ItemIconProps["asset"];
};

const styles = StyleSheet.create({
  label_icon_container: {
    flexDirection: "row",
    alignItems: "center",
  },
});

export function Button({
  selectedItem,
  item,
  onPress,
  configuration,
  iconBaseProps,
  itemBaseProps: itemProps,
  labelBaseProps,
  label,
  iconPlacement = "left",
  defaultItemIcon,
  selectedItemIcon,
  disabled = false,
}: ButtonProps) {
  const [focused, setFocused] = useState(false);

  const selected = selectedItem && item.value === selectedItem?.value;

  const itemIconPropsAssets = useMemo<ItemIconProps["asset"]>(
    () => configuration[item.asset] ?? item.asset ?? defaultItemIcon,
    [item.asset, defaultItemIcon]
  );

  const selectedItemIconPropsAssets = useMemo<ItemIconProps["asset"]>(
    () => selectedItemIcon || defaultSelectedAsset,
    [selectedItemIcon]
  );

  const renderItemIcon =
    itemIconPropsAssets && itemIconPropsAssets.length > 0 ? (
      <ItemIcon {...iconBaseProps} asset={itemIconPropsAssets} />
    ) : null;

  if (disabled) return null;

  return (
    <TouchableOpacity
      activeOpacity={1}
      onPress={() => onPress(item)}
      onPressIn={() => setFocused(true)}
      onPressOut={() => setFocused(false)}
    >
      <Item {...itemProps} focused={focused} selected={selected}>
        <View style={styles.label_icon_container}>
          {iconPlacement === "left" && renderItemIcon}

          {label ? (
            <ItemLabel
              {...labelBaseProps}
              label={label ?? null}
              focused={focused}
              selected={selected}
            />
          ) : null}
        </View>

        {selected ? (
          <ItemIcon {...iconBaseProps} asset={selectedItemIconPropsAssets} />
        ) : (
          iconPlacement === "right" && renderItemIcon
        )}
      </Item>
    </TouchableOpacity>
  );
}