import React from 'react';
import { View } from 'react-native';
import { useTheme } from '../hooks/ThemeProvider';
import RsText from './RsText';
import type { RsTextStyle } from '../styles/types';
import type { ColorValue, ViewStyle } from 'react-native';

export type RsDividerProps = {
  direction?: 'row' | 'column'; // default: 'column'
  thickness?: number; // default: 1
  color?: ColorValue; // default: theme.Borders.input
  margin?: number; // default: 8
  content?: string | React.ReactNode; // default: undefined
  textProps?: RsTextStyle; // for customizing RsText if content is string
  style?: ViewStyle; // for outer container
  lineStyle?: ViewStyle; // for the line itself
};

const RsDivider: React.FC<RsDividerProps> = ({
  direction = 'column',
  thickness = 1,
  color,
  margin = 8,
  content,
  textProps = {},
  style,
  lineStyle,
}) => {
  const theme = useTheme();
  const isHorizontal = direction === 'column';
  const lineColor = color || theme.Borders.input;

  // Line style for left/top and right/bottom
  const baseLineStyle: ViewStyle = isHorizontal
    ? {
        flex: 1,
        height: thickness,
        backgroundColor: lineColor,
        marginHorizontal: 0,
        marginVertical: margin,
      }
    : {
        flex: 1,
        width: thickness,
        backgroundColor: lineColor,
        marginVertical: 0,
        marginHorizontal: margin,
      };

  // Container flex direction
  const containerStyle: ViewStyle = {
    flexDirection: isHorizontal ? 'row' : 'column',
    alignItems: 'center',
    ...style,
  };

  // Render center content
  let centerContent: React.ReactNode = null;
  if (typeof content === 'string' || typeof content === 'number') {
    centerContent = (
      <RsText
        text={content}
        fontSize={12}
        fontWeight="Regular"
        color={theme.Text.text}
        style={{
          marginHorizontal: isHorizontal ? 8 : 0,
          marginVertical: isHorizontal ? 0 : 8,
        }}
        {...textProps}
      />
    );
  } else if (content) {
    centerContent = (
      <View
        style={{
          marginHorizontal: isHorizontal ? 8 : 0,
          marginVertical: isHorizontal ? 0 : 8,
        }}
      >
        {content}
      </View>
    );
  }

  return (
    <View style={containerStyle}>
      <View style={[baseLineStyle, lineStyle]} />
      {centerContent}
      <View style={[baseLineStyle, lineStyle]} />
    </View>
  );
};

export default RsDivider;