import { FiltersMap } from '@wix/bex-core';
import { observer } from 'mobx-react-lite';
import React, { CSSProperties, ReactElement } from 'react';
import { PickerStandaloneLayoutHeader } from './PickerStandaloneLayoutHeader';
import { PickerStandaloneState } from '../../state';
import { PickerProps } from '../Picker';
import { Box, BoxProps, TextButtonProps } from '@wix/design-system';
import { PickerStandaloneLayoutFooter } from './PickerStandaloneLayoutFooter';

export interface PickerStandaloneLayoutProps<T, F extends FiltersMap> {
  state: PickerStandaloneState<T, F>;
  children?: ReactElement<PickerProps<T, F>>;
  createNewAction?: ReactElement<TextButtonProps>;
  renderError: (params: { err: unknown; isOnline: boolean }) => ReactElement;
  defaultTitle?: string;
  defaultSubtitle?: string;
  titleMaxLines?: number;
  hideSearch?: boolean;
  height?: CSSProperties['height'];
  maxHeight?: CSSProperties['maxHeight'];
  width?: CSSProperties['width'];
}

function _PickerStandaloneLayout<T, F extends FiltersMap = FiltersMap>(
  props: PickerStandaloneLayoutProps<T, F>,
) {
  const {
    children,
    state,
    height,
    maxHeight = '100vh',
    width = '618px',
    createNewAction,
    ...rest
  } = props;

  const { isMobileView } = state;

  const containerProps: Partial<BoxProps & CSSProperties> = isMobileView
    ? {
        height: '100%',
        width: '100%',
      }
    : {
        height,
        width,
        maxHeight,
        borderRadius: '8px',
        boxShadow:
          'rgba(22, 45, 61, 0.12) 0px 8px 8px 0px, rgba(22, 45, 61, 0.18) 0px 3px 24px 0px',
      };

  return (
    <Box
      direction="vertical"
      backgroundColor="D80"
      overflowY="auto"
      {...containerProps}
      {...rest}
    >
      <PickerStandaloneLayoutHeader {...props} />
      {children}
      {createNewAction && (
        <PickerStandaloneLayoutFooter
          state={state}
          createNewAction={createNewAction}
        />
      )}
    </Box>
  );
}
export const PickerStandaloneLayout = observer(_PickerStandaloneLayout);