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

import { ModalHeader } from "./Header";

type ModalComponentProps = {
  items: any[];
  current_selection?: any;
  onPress: (item: any) => void;
  width: number;
  currentRoute: boolean;
  summary?: string;
  title?: string;
  maxHeight?: number;
  dismiss: () => void;
  buttonComponent?: React.ComponentType;
};

export function BottomSheetModalContent(props: ModalComponentProps) {
  const {
    items,
    currentRoute,
    maxHeight,
    current_selection = null,
    onPress,
    dismiss,
    summary,
    title,
    buttonComponent: ButtonComponent = Button,
  } = props;

  const [headerHeight, setHeaderHeight] = useState(0);
  const route = useRef(currentRoute);
  const theme = useTheme<BaseThemePropertiesMobile>();

  const maxContentHeight = maxHeight
    ? maxHeight - headerHeight - Number(theme.modal_bottom_sheet_padding_top)
    : undefined;

  const onHeaderLayout = useCallback((event: LayoutChangeEvent) => {
    setHeaderHeight(event.nativeEvent.layout.height);
  }, []);

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

  const iconBaseProps = useMemo<ItemIconProps>(() => {
    return defaultItemIconProps(theme);
  }, [theme]);

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

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

  const handlePress = (item: any) => {
    onPress(item);
    dismiss();
  };

  return (
    <View
      style={{
        paddingTop: Number(theme.modal_bottom_sheet_padding_top),
      }}
    >
      <ModalHeader
        width={props.width}
        dismiss={dismiss}
        configuration={theme}
        onLayout={onHeaderLayout}
        summary={summary}
        title={title}
      />
      <ScrollView
        bounces={false}
        style={{ maxHeight: maxContentHeight }}
        contentContainerStyle={{
          paddingBottom: Number(theme.modal_bottom_sheet_padding_bottom),
          paddingTop: Number(theme.modal_bottom_sheet_padding_top),
        }}
      >
        {items.map((item, index) => (
          <ButtonComponent
            key={index}
            width={props.width}
            configuration={theme}
            selectedItem={current_selection}
            item={item}
            onPress={handlePress}
            iconBaseProps={iconBaseProps}
            itemBaseProps={itemBaseProps}
            labelBaseProps={labelBaseProps}
          />
        ))}
      </ScrollView>
    </View>
  );
}