import React from 'react';
import {View, Pressable} from 'react-native';
import {IconChevronDown, IconChevronUp} from '@tabler/icons-react-native';
import {Typography} from '@components/_core';
import {useCollapsed} from '@hooks/useCollapsed';
import {ICON_SIZES, useTheme} from '@shared/theme';

import {styles} from './styles';

interface CollapsibleGroupProps {
  children: React.ReactNode;
  title: string;
  description?: string;
}

function CollapsibleGroup({
  children,
  title,
  description,
}: CollapsibleGroupProps) {
  const {theme} = useTheme();
  const {collapsed, onToggleCollapsed} = useCollapsed();
  const IconAction = collapsed ? IconChevronUp : IconChevronDown;

  return (
    <View>
      <Pressable style={styles.groupRow} onPress={onToggleCollapsed}>
        <View>
          <Typography variant="m" weight="semiBold">
            {title}
          </Typography>
          {description && (
            <Typography
              variant="xs"
              weight="regular"
              color={theme.text.neutral.lighter}>
              {description}
            </Typography>
          )}
        </View>
        <IconAction color={theme.icon.neutral.default} size={ICON_SIZES.x6} />
      </Pressable>
      <View style={styles.content}>{collapsed ? children : null}</View>
    </View>
  );
}

export default CollapsibleGroup;
