import React from 'react';
import {
  type StyleProp,
  StyleSheet,
  type TextStyle,
  View,
  type ViewStyle,
} from 'react-native';
import { moderateScale } from 'react-native-size-matters';
import ATypography from '../TTypography/TTypography';
import { TypographyVariant } from '../TTypography/TTypographyEnum';
import { withTheme, useTheme } from '../../core/theming';
import type { Theme } from '../../utils/types';
import { defaultScale } from '../../utils/Common';

type Props = React.ComponentPropsWithRef<any> & {
  title: React.ReactNode;
  titleStyle?: StyleProp<TextStyle>;
  titleNumberOfLines?: number;
  subtitle?: React.ReactNode;
  subtitleStyle?: StyleProp<TextStyle>;
  subtitleNumberOfLines?: number;
  left?: (props: { size: number }) => React.ReactNode;
  leftStyle?: StyleProp<ViewStyle>;
  right?: (props: { size: number }) => React.ReactNode;
  rightStyle?: StyleProp<ViewStyle>;
  style?: StyleProp<ViewStyle>;
  theme: Theme;
};

const LEFT_RIGHT_SIZE = moderateScale(40, defaultScale);

const CardTitle = ({
  title,
  titleStyle,
  titleNumberOfLines = 1,
  subtitle,
  subtitleStyle,
  subtitleNumberOfLines = 1,
  left,
  leftStyle,
  right,
  rightStyle,
  style,
}: Props): any => {
  const { colors } = useTheme();
  const stylesWithProp = styles({ colors });

  return (
    <View style={[stylesWithProp.container, style]}>
      {left ? (
        <View style={[stylesWithProp.left, leftStyle]}>
          {left({
            size: LEFT_RIGHT_SIZE,
          })}
        </View>
      ) : null}

      <View style={[stylesWithProp.titles]}>
        {title && (
          <ATypography
            style={[stylesWithProp.title, titleStyle]}
            fontSize={22}
            numberOfLines={titleNumberOfLines}
            variant={TypographyVariant.SECONDARY_BOLD}
          >
            {title}
          </ATypography>
        )}
        {subtitle && (
          <ATypography
            fontSize={14}
            style={[stylesWithProp.subtitle, subtitleStyle]}
            numberOfLines={subtitleNumberOfLines}
            variant={TypographyVariant.SECONDARY_DEMI}
          >
            {subtitle}
          </ATypography>
        )}
      </View>
      {right ? (
        <View style={[stylesWithProp.right, rightStyle]}>
          {right({
            size: LEFT_RIGHT_SIZE,
          })}
        </View>
      ) : null}
    </View>
  );
};

CardTitle.displayName = 'Card.Title';

const styles = (props: { colors: any }) =>
  StyleSheet.create({
    container: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      paddingHorizontal: moderateScale(16, defaultScale),
      paddingTop: moderateScale(16, defaultScale),
      paddingBottom: moderateScale(8, defaultScale),
      backgroundColor: props.colors.background,
    },

    left: {
      justifyContent: 'center',
      marginRight: moderateScale(10, defaultScale),
      height: LEFT_RIGHT_SIZE,
      width: LEFT_RIGHT_SIZE,
      backgroundColor: props.colors.background,
    },

    right: {
      justifyContent: 'center',
      marginLeft: moderateScale(10, defaultScale),
      height: LEFT_RIGHT_SIZE,
      width: LEFT_RIGHT_SIZE,
      backgroundColor: props.colors.background,
    },

    titles: {
      flex: 1,
      flexDirection: 'column',
      justifyContent: 'center',
    },

    title: {
      color: props.colors.textColor,
    },

    subtitle: {
      color: props.colors.textColor,
      marginTop: moderateScale(8, defaultScale),
    },
  });

export default withTheme(CardTitle);