import { FiltersMap } from '@wix/bex-core';
import { observer } from 'mobx-react-lite';
import React from 'react';
import { Box, BoxProps } from '@wix/design-system';
import { MaxHeightText } from '../MaxHeightText';
import { ModalHeadingBox } from '../ModalHeadingBox';
import { Heading } from '../Heading';
import { PickerStandaloneState } from '../../state';

export interface PickerStandaloneLayoutTitlesProps<
  T,
  F extends FiltersMap = FiltersMap,
> extends BoxProps {
  state: PickerStandaloneState<T, F>;
  defaultTitle?: string;
  defaultSubtitle?: string;
  titleMaxLines?: number;
}

function _PickerStandaloneLayoutTitles<T, F extends FiltersMap = FiltersMap>(
  props: PickerStandaloneLayoutTitlesProps<T, F>,
) {
  const {
    state,
    defaultTitle,
    defaultSubtitle,
    titleMaxLines = 2,
    ...rest
  } = props;

  const {
    title: titleFromUrl,
    subtitle: subtitleFromUrl,
    isMobileView,
  } = state;

  const title = titleFromUrl ?? defaultTitle;
  const subtitle = subtitleFromUrl ?? defaultSubtitle;

  const { titlesContainerProps, textProps } = isMobileView
    ? {
        titlesContainerProps: {
          paddingLeft: 'SP4',
          paddingRight: 'SP4',
          align: 'left' as const,
        },
        textProps: {
          textAlign: 'left' as const,
        },
      }
    : {
        titlesContainerProps: {
          paddingLeft: 'SP7',
          paddingRight: 'SP7',
          gap: 'SP1',
          align: 'center' as const,
        },
        textProps: {
          textAlign: 'center' as const,
        },
      };

  return (
    <Box display="grid" {...rest} {...titlesContainerProps}>
      <ModalHeadingBox
        dataHook="picker-standalone-title"
        maxLines={titleMaxLines}
        lineHeight={36}
        width="100%"
        {...textProps}
      >
        {/* the div is because max lines can't apply styles on <Heading />*/}
        <div>
          <Heading size="large">{title}</Heading>
        </div>
      </ModalHeadingBox>
      {subtitle && (
        <ModalHeadingBox
          lineHeight={24}
          maxLines={1}
          dataHook="picker-standalone-subtitle"
          {...textProps}
        >
          <div>
            {/* the div is because max lines can't apply styles on <Text />*/}
            <MaxHeightText lineHeight={24}>{subtitle}</MaxHeightText>
          </div>
        </ModalHeadingBox>
      )}
    </Box>
  );
}
export const PickerStandaloneLayoutTitles = observer(
  _PickerStandaloneLayoutTitles,
);