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";
import { BottomSheetDragArea } from "./BottomSheetDragArea";

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;

  scrollViewContent?: {
    renderItem: (item: any, index: number) => React.ReactNode;
    items: any[];
  } | null;

  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 = DefaultModalHeader,
    scrollViewContent = null,

    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);

  const Header = headerComponent;

  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,
      }}
    >
      {Header ? (
        <BottomSheetDragArea>
          <Header
            dismiss={dismiss}
            configuration={theme}
            summary={summary}
            title={title}
          />
        </BottomSheetDragArea>
      ) : null}
      <ScrollView
        overScrollMode="never"
        bounces={false}
        showsVerticalScrollIndicator={false}
        contentContainerStyle={{
          paddingBottom: paddingBottom + bottomInset,
        }}
      >
        {scrollViewContent
          ? scrollViewContent.items.map((item, index) =>
              scrollViewContent.renderItem(item, index)
            )
          : null}
        {!scrollViewContent &&
          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>
  );
}