import React from 'react';
import {StyleSheet, View, TouchableOpacity, Text} from 'react-native';
import {GradientBackground, SocialMediaLinker} from '../../components';
import {LinkerType} from 'src/types';
import {SOCIAL_LIST} from '../../constants/';

/**
 * Home Screen for displaying Tagg post suggestions
 * for users to discover and browse
 */

const Home: React.FC = () => {
  const linkers: Array<LinkerType> = [];
  const [state, setState] = React.useState({
    showMore: false,
  });

  let numSocials: Number = state.showMore ? 9 : 3;

  for (let i = 0; i < numSocials; i++) {
    let linker: LinkerType = {
      label: SOCIAL_LIST[i],
    };
    linkers.push(linker);
  }

  const handleShowPress = () => {
    setState({
      ...state,
      showMore: !state.showMore,
    });
  };

  return (
    <GradientBackground>
      <View style={styles.container}>
        {linkers.map((linker, index) => (
          <SocialMediaLinker key={index} social={linker} />
        ))}
        <TouchableOpacity onPress={handleShowPress} style={styles.show}>
          {state.showMore && <Text>Show Less 🔼</Text>}
          {!state.showMore && <Text>Show More 🔽</Text>}
        </TouchableOpacity>
      </View>
    </GradientBackground>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    height: '19%',
    flexWrap: 'wrap',
    justifyContent: 'center',
    alignContent: 'center',
  },
  show: {
    borderColor: '#fff',
    borderWidth: 1,
    borderRadius: 3,
    paddingHorizontal: '2%',
    paddingVertical: '1%',
    marginVertical: '3%',
    marginLeft: '65%',
  },
});

export default Home;