import React, {useEffect, useState} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconChevronRight} from '@tabler/icons-react-native';
import Animated, {useAnimatedStyle, withTiming} from 'react-native-reanimated';
import {
  Gradient,
  CardContainer,
  Pressable,
  Typography,
  TypographyWithLinks,
} from '@components';
import {useConversation} from '@modules/chats/store';
import {hexToRgb} from '@shared/colors';
import {ICON_SIZES, NEUTRAL_COLORS, useTheme} from '@shared/theme';

import EditDescriptionModal from '../EditDescriptionModal';
import {
  calculateDescriptionHeight,
  DEFAULT_DESCRIPTION_HEIGHT,
  styles,
} from './styles';

const DESCRIPTION_MAX_HEIGHT = 66;

interface Props {
  channel: string;
  isAdmin: boolean;
}

export function GroupDescription({channel, isAdmin}: Props) {
  const {t} = useTranslation();
  const {theme} = useTheme();
  const conversation = useConversation(channel);
  const [isEditDescriptionVisible, setIsEditDescriptionVisible] =
    useState(false);
  const [isExpanded, setIsExpanded] = useState(false);
  const [calculatedHeight, setCalculatedHeight] = useState(20);
  const description = conversation?.purpose?.value;
  const hasDescription = !!description?.length;
  const shouldShowSeeMore =
    !isExpanded && calculatedHeight > DESCRIPTION_MAX_HEIGHT;
  const onEditDescriptionClose = () => {
    setIsEditDescriptionVisible(false);
  };

  const onDescriptionPress = () => {
    setIsEditDescriptionVisible(true);
  };

  const animatedStyle = useAnimatedStyle(() => {
    return {
      height: withTiming(
        isExpanded
          ? calculatedHeight
          : Math.min(calculatedHeight, DESCRIPTION_MAX_HEIGHT),
        {duration: 250},
      ),
    };
  });

  useEffect(() => {
    if (description) {
      calculateDescriptionHeight(description, isAdmin).then(height => {
        setCalculatedHeight(height);
      });
    } else {
      setCalculatedHeight(DEFAULT_DESCRIPTION_HEIGHT);
    }
  }, [description, isAdmin]);

  return !hasDescription && !isAdmin ? null : (
    <>
      <CardContainer>
        <Animated.View style={[styles.animatedContainer, animatedStyle]}>
          <Pressable
            onPress={onDescriptionPress}
            disabled={!isAdmin}
            style={styles.cardContainer}>
            <View style={styles.description}>
              {hasDescription ? (
                <TypographyWithLinks
                  value={description}
                  variant="xs"
                  weight="semiBold"
                  allowFontScaling={false}
                  textBreakStrategy="highQuality"
                  numberOfLines={isExpanded ? undefined : 3}
                  style={styles.descriptionText}
                />
              ) : (
                <Typography
                  variant="xs"
                  weight="semiBold"
                  color={theme.brand[500]}
                  numberOfLines={1}>
                  {t('chat.description.add')}
                </Typography>
              )}
              {shouldShowSeeMore && (
                <>
                  <Gradient
                    colors={[
                      hexToRgb(theme.background.layout.tertiary, 0),
                      theme.background.layout.tertiary,
                      theme.background.layout.tertiary,
                    ]}
                    start={{x: 0, y: 0}}
                    end={{x: 1, y: 0}}
                    style={styles.gradient}
                  />
                  <Pressable
                    onPress={() => setIsExpanded(true)}
                    style={[
                      styles.seeMore,
                      {backgroundColor: theme.background.layout.tertiary},
                    ]}>
                    <Typography
                      variant="xs"
                      weight="semiBold"
                      color={theme.brand[500]}>
                      {t('general.see_more')}
                    </Typography>
                  </Pressable>
                </>
              )}
            </View>
            {isAdmin && (
              <IconChevronRight
                color={NEUTRAL_COLORS.grey[700]}
                size={ICON_SIZES.x5}
              />
            )}
          </Pressable>
        </Animated.View>
      </CardContainer>
      <EditDescriptionModal
        isVisible={isEditDescriptionVisible}
        onClose={onEditDescriptionClose}
        currentDescription={description}
        channel={channel}
      />
    </>
  );
}
