import {StyleSheet} from 'react-native';
import TextSize from 'react-native-text-size';
import {getFontStyle, TYPOGRAPHY_STYLES} from '@components/_core';
import {ICON_SIZES, SPACING} from '@shared/theme';
import {windowDimensions} from '@shared/constants';
import {isIos} from '@shared/utils';

const EDIT_DESCRIPTION_ICON_SIZE = ICON_SIZES.x5 + SPACING.x1;

export const styles = StyleSheet.create({
  animatedContainer: {overflow: 'hidden'},
  cardContainer: {
    alignItems: 'center',
    flexDirection: 'row',
    gap: SPACING.x1,
    justifyContent: 'space-between',
  },
  description: {
    flex: 1,
    position: 'relative',
  },
  descriptionText: {includeFontPadding: false},
  gradient: {
    bottom: 0,
    height: 20,
    position: 'absolute',
    right: 0,
    width: 120,
    zIndex: 0,
  },
  seeMore: {
    bottom: 0,
    height: 20,
    position: 'absolute',
    right: 0,
    zIndex: 1,
  },
});

// window width - screen horizontal padding - card container horizontal padding - border width (left and right)
const DESCRIPTION_MAX_WIDTH =
  windowDimensions.width - SPACING.x2 * 2 - SPACING.x2 * 2 - 2;

export const DEFAULT_DESCRIPTION_HEIGHT = TYPOGRAPHY_STYLES.xs.lineHeight;

export const calculateDescriptionHeight = async (
  text: string,
  isAdmin: boolean,
) => {
  const data = text;
  if (!data || data.length === 0) {
    return 0;
  }

  try {
    const lineCount = await TextSize.getLineCount({
      text: [data],
      width: DESCRIPTION_MAX_WIDTH - (isAdmin ? EDIT_DESCRIPTION_ICON_SIZE : 0),
      fontSize: TYPOGRAPHY_STYLES.xs.fontSize,
      letterSpacing: TYPOGRAPHY_STYLES.xs.letterSpacing,
      fontWeight: '600',
      fontFamily: getFontStyle('semiBold').fontFamily,
      fontStyle: 'normal',
      textBreakStrategy: 'highQuality',
      allowFontScaling: false,
      includeFontPadding: false,
    });

    // line count * line height
    return lineCount[0] * (isIos ? 20 : TYPOGRAPHY_STYLES.xs.lineHeight);
  } catch (error) {
    // Do nothing
  }

  return 0;
};
