import React, {useState} from 'react';
import {
  BottomModalList,
  BottomModalListProps,
  BottomModalFooter,
  BottomModalFooterProps,
} from '@components/_core/Modals';
import {useSafeAreaBottomPadding} from '@hooks/useSafeAreaBottomPadding';
import {SPACING} from '@shared/theme';

import {Divider} from '../Divider';

export interface MenuProps<TData> extends BottomModalListProps<TData> {
  footer?: BottomModalFooterProps;
  extraPadding?: number;
  withDivider?: boolean;
}

export function Menu<TData extends object>({
  footer,
  withDivider,
  extraPadding = 0,
  ...rest
}: MenuProps<TData>) {
  const [footerHeight, setFooterHeight] = useState(0);
  const paddingBottom = useSafeAreaBottomPadding({
    extra: SPACING['x2.5'] + extraPadding,
  });

  return (
    <BottomModalList<TData>
      {...rest}
      ItemSeparatorComponent={withDivider ? Divider : null}
      paddingBottom={footer ? footerHeight : paddingBottom}
      footerComponent={
        footer ? (
          <BottomModalFooter
            footer={footer}
            setFooterHeight={setFooterHeight}
          />
        ) : null
      }
    />
  );
}