import React, {useContext, useState} from 'react';
import {StyleSheet, Text, View, Image, Pressable} from 'react-native';
import ListWithoutSelect from './ListWithoutSelect';
import ColorContext from '../theme/ColorContext';

type ProfileProps = {
  name: string
  avatar: string
  diets: {value: string}[]
  allergies: {value: string}[]
}

export default function ProfileDelete(props: ProfileProps) {
  const {colors} = useContext(ColorContext)
  const [display, setDisplay] = useState("flex")
  const changeListVisibility = () => {
    if (display == "none"){
        setDisplay("flex")
    }
    else{
        setDisplay("none")
    }
  };

  let imageSource
  if (props.avatar == "plus.png"){
     imageSource = require('../assets/images/plus.png')
  }
  else if (props.avatar == "plus_small.png"){
     imageSource = require('../assets/images/plus_small.png')
  }
  else{
     imageSource = require('../assets/images/logo.png')
  }

  const styles = StyleSheet.create({
    background: {
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center',
      borderRadius: 15,
      backgroundColor: colors.cardBackground,
      padding: "3%",
      marginHorizontal: "3%",
      height: "100%",
      borderWidth: 1,
      borderColor: colors.blocBorder,
    },
  
    pseudoBar: {
      flexDirection: "row",
      alignItems: "center",
      justifyContent: "center",
      width: "100%",
      marginHorizontal: "3%",
      marginBottom: "3%",
    },
    avatar: {
      padding: "5%",
      resizeMode: 'contain',
      borderWidth: 2,
      borderColor: colors.cardElementBorder,
      borderRadius: 45,
      height: "100%",
      flex: 0.03,
    },
    text: {
      flex: 1,
      fontSize: 20,
      color: colors.cardElementBorder,
      alignItems: 'center',
      textAlign: 'left',
      marginLeft: "10%",
      padding: "2%",
      height: "100%",
    },
  
    filterBar: {
        flexDirection: "row",
        width: "90%",
        paddingTop: "3%",
        alignItems: "flex-end",
        justifyContent: "center",
    },
    filters: {
        fontSize: 20,
        color: colors.cardElementBorder,
        flex: 1,
        padding: "2%",
        paddingLeft: 0,
        paddingBottom: 0,
    },
    arrow: {
        height: "100%",
        resizeMode: 'contain',
        tintColor: colors.cardDetail,
        flex: 0.1,
    },
  });

  return (
    <View style={styles.background}>
        <View style={styles.pseudoBar}>
            <Image source={imageSource} style={styles.avatar}></Image>
            <Text style={styles.text}>{props.name}</Text>
        </View>
        <Pressable onPress={changeListVisibility} style={{height: "5%", marginTop: "6%", flex: 1, marginBottom: "3%"}}>
            <View style={styles.filterBar}>
                <Text style={styles.filters}>Filters</Text>
                <Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image>
            </View>
        </Pressable>
        <View style={{display: display}}>
            <ListWithoutSelect title="Diets" content={props.diets}></ListWithoutSelect>
            <View style={{marginTop: "3%"}}/>
            <ListWithoutSelect title="Allergies" content={props.allergies}></ListWithoutSelect>
        </View>
    </View>
  );
}