import React, { isValidElement } from 'react';
import { Image } from 'react-native';
import { Box } from '../Box';
import { Button } from '../Button';
import { Text } from '../Text';
import { useTheme } from '../../theme/ThemeProvider';
import type {
  WithSecondaryButton,
  WithPrimaryButton,
  WithoutButton,
} from './messageview';

/**
 * MessageView
 * @typeof WithSecondaryButton | WithPrimaryButton | WithoutButton
 *
 * @example
 * MessageView example WithSecondaryButton
 * ```
 * <MessageView
 *    title="Secondary with 2 buttons"
 *    labelPrimaryBtn="Secondary Click"
 *    labelSecondaryBtn="2 Buttons"
 *    handlePrimaryBtn={() => console.warn('Clicked secondary!')}
 *    handleSecondaryBtn={() => console.warn('Secondary clicked!')}
 * />
 * ```
 */
export const MessageView = ({
  title,
  subTitle,
  headerComponent,
  imgUri,
  svgIcon,
  imgHeight = 240,
  innerComponent,
  labelPrimaryBtn,
  handlePrimaryBtn,
  labelSecondaryBtn,
  handleSecondaryBtn,
  withoutButton = false,
}: WithPrimaryButton | WithSecondaryButton | WithoutButton) => {
  const { fonts } = useTheme();
  const source = typeof imgUri === 'number' ? imgUri : { uri: imgUri };

  return (
    <Box
      flex={1}
      bg={'white'}
      padding={'spacing-s'}
      justifyContent={'flex-end'}
    >
      {headerComponent ? (
        <Box flex={1}>{headerComponent}</Box>
      ) : (
        <Box flex={1} justifyContent={'flex-end'}>
          {imgUri && (
            <Image
              source={source}
              resizeMode={'contain'}
              // eslint-disable-next-line react-native/no-inline-styles
              style={{
                marginBottom: innerComponent ? 40 : 50,
                width: '100%',
                height: imgHeight,
              }}
            />
          )}
          {svgIcon && (
            <Box alignItems={'center'} marginBottom={'spacing-l'}>
              {svgIcon}
            </Box>
          )}
        </Box>
      )}
      <Text
        variant={'H2'}
        fontFamily={fonts.caustenRoundBold}
        textAlign={'center'}
        marginBottom={'spacing-m'}
      >
        {title}
      </Text>
      {typeof subTitle === 'string' ? (
        <Text
          textAlign={'center'}
          fontFamily={fonts.caustenRoundRegular}
          marginBottom={innerComponent ? 'spacing-m' : 'spacing-l'}
          variant={'body'}
        >
          {subTitle}
        </Text>
      ) : isValidElement(subTitle) ? (
        <Box marginBottom={innerComponent ? 'spacing-m' : 'spacing-l'}>
          {subTitle}
        </Box>
      ) : null}
      {innerComponent && <Box marginBottom={'spacing-m'}>{innerComponent}</Box>}
      {!withoutButton && labelPrimaryBtn && handlePrimaryBtn ? (
        <Button label={labelPrimaryBtn} onPress={handlePrimaryBtn} />
      ) : null}
      {!withoutButton && labelSecondaryBtn && handleSecondaryBtn && (
        <Button
          label={labelSecondaryBtn}
          onPress={handleSecondaryBtn}
          variant="outlined"
          marginTop={'spacing-xs'}
        />
      )}
    </Box>
  );
};