import React, { useCallback, useEffect, useMemo, useRef } from "react";
import { View, ScrollView } from "react-native";
import { Button } from "./Button";
import { ItemIconProps } from "./Button/ItemIcon";
import { ItemProps } from "./Button/Item";
import { ItemLabelProps } from "./Button/ItemLabel";
import { getItemIconProps, getItemLabelProps, getItemProps } from "./utils";
import { useTheme } from "@applicaster/zapp-react-native-utils/theme";

import type { PluginConfiguration } from "./";

import { ModalHeader as DefaultModalHeader } from "./Header";
import { useSafeAreaInsets } from "react-native-safe-area-context";

type ModalComponentProps = {
  items: any[];
  current_selection?: any;
  onPress: (item: any) => void;
  width: number;
  currentRoute: boolean;
  summary?: string;
  title?: string;
  maxHeight?: number;
  dismiss: () => void;
  headerComponent?: React.ComponentType;
  buttonComponent?: React.ComponentType;
  iconProps?: ItemIconProps | ((theme: PluginConfiguration) => ItemIconProps);
  itemProps?:
    | ItemProps
    | ((theme: PluginConfiguration, width: number) => ItemProps);
  labelProps?:
    | ItemLabelProps
    | ((theme: PluginConfiguration, width: number) => ItemLabelProps);
  getSelectedItemIcon: (
    theme: PluginConfiguration
  ) => ItemIconProps["asset"] | null;
  getDefaultItemIcon: (
    theme: PluginConfiguration
  ) => ItemIconProps["asset"] | null;
  iconPlacement?: "left" | "right";
};

export function BottomSheetModalContent(props: ModalComponentProps) {
  const {
    items,
    currentRoute,
    current_selection = null,
    onPress,
    dismiss,
    summary,
    title,
    headerComponent: ModalHeader = DefaultModalHeader,
    buttonComponent: ButtonComponent = Button,
    getSelectedItemIcon = ({
      modal_bottom_sheet_item_selected_icon,
    }: BaseThemePropertiesMobile) => modal_bottom_sheet_item_selected_icon,
    getDefaultItemIcon = () => null,
    iconPlacement,
  } = props;

  const route = useRef(currentRoute);
  const theme = useTheme<BaseThemePropertiesMobile>();
  const paddingTop = Number(theme.modal_bottom_sheet_padding_top);
  const paddingBottom = Number(theme.modal_bottom_sheet_padding_bottom);

  useEffect(() => {
    if (currentRoute !== route.current) {
      props.dismiss();
    }
  }, [currentRoute]);

  const iconBaseProps = useMemo<ItemIconProps>(() => {
    return getItemIconProps(theme, props.iconProps);
  }, [theme, props.iconProps]);

  const itemBaseProps = useMemo<ItemProps>(() => {
    return getItemProps(theme, props.width, props.itemProps);
  }, [theme, props.width, props.itemProps]);

  const labelBaseProps = useMemo<ItemLabelProps>(() => {
    return getItemLabelProps(theme, props.width, props.labelProps);
  }, [theme, props.width, props.labelProps]);

  const handlePress = useCallback(
    (item: any) => {
      onPress(item);
      dismiss();
    },
    [onPress, dismiss]
  );

  const bottomInset = useSafeAreaInsets().bottom;

  return (
    <View
      style={{
        maxHeight: props.maxHeight,
        paddingTop: paddingTop,
      }}
    >
      <ModalHeader
        dismiss={dismiss}
        configuration={theme}
        summary={summary}
        title={title}
      />
      <ScrollView
        contentContainerStyle={{
          paddingBottom: paddingBottom + bottomInset,
        }}
      >
        {items.map((item, index) =>
          item ? (
            <ButtonComponent
              key={index}
              configuration={theme}
              selectedItem={current_selection}
              item={item}
              onPress={handlePress}
              label={theme[item?.label] ?? item?.label}
              iconBaseProps={iconBaseProps}
              itemBaseProps={itemBaseProps}
              labelBaseProps={labelBaseProps}
              selectedItemIcon={getSelectedItemIcon(theme)}
              defaultItemIcon={getDefaultItemIcon(theme)}
              iconPlacement={iconPlacement}
            />
          ) : null
        )}
      </ScrollView>
    </View>
  );
}