import {MyIcon} from '@components/MyIcon';
import {MyScreenContainer} from '@components/MyScreenContainer';
import {MyTouchableOpacity} from '@components/MyTouchableOpacity';
import {Text} from '@gluestack-ui/themed';
import {RootState} from '@redux/store';
import {View} from 'react-native';
import {useSelector} from 'react-redux';

export function Help() {
  const lang = useSelector(
    (state: RootState) => state.appVariables.lang.profile.settings.help,
  );

  return (
    <MyScreenContainer>
      <Item icon="bug-report" title={lang.reportAProblem} onPress={() => {}} />
      <Item icon="contact-support" title={lang.helpCenter} onPress={() => {}} />
    </MyScreenContainer>
  );
}

export interface ItemProps {
  icon: string;
  title: string;
  value?: string;
  onPress?: () => void;
}

export function Item({icon, title, value, onPress}: ItemProps) {
  const currentTheme = useSelector(
    (state: RootState) => state.nonSaveVariables.theme.colors,
  );

  return (
    <MyTouchableOpacity
      style={{
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: currentTheme.backgroundDark300,
        borderRadius: 10,
        padding: 12,
        marginTop: 12,
      }}
      disabled={!onPress}
      onPress={onPress}>
      <View style={{flexDirection: 'row', gap: 12, alignItems: 'center'}}>
        <MyIcon name={icon} size={36} />
        <View>
          {value ? (
            <>
              <Text>{title}</Text>
              <Text bold>{value}</Text>
            </>
          ) : (
            <Text bold>{title}</Text>
          )}
        </View>
      </View>
    </MyTouchableOpacity>
  );
}
