import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { TouchableOpacity, TouchableWithoutFeedback } from 'react-native-gesture-handler';
import Icon from 'react-native-vector-icons/Ionicons';
import { responsiveFontSize, responsiveHeight } from 'react-native-responsive-dimensions';
import { colors } from '../../theme/colors';

type SortAndViewProps = {
  onChangeShowSummary: Function;
  showSummary: Boolean;
};

const SortAndView = (props: SortAndViewProps) => {
  const { onChangeShowSummary, showSummary } = props;
  const handleShowList = () => onChangeShowSummary(false);
  const handleShowSummary = () => onChangeShowSummary(true);
  return (
    <View style={styles.container}>
      <View style={styles.sortContainer}>
        <TouchableOpacity>
          <View style={styles.sortContent}>
            <Text style={styles.sortText}>Popularity</Text>
            <Icon name={'caret-down'} size={16} color={colors.greyDark} />
          </View>
        </TouchableOpacity>
      </View>
      <View style={styles.viewContent}>
        <TouchableWithoutFeedback onPress={handleShowSummary}>
          <Icon name={'grid'} size={24} color={showSummary ? colors.greyDark : colors.greyLight} />
        </TouchableWithoutFeedback>
        <TouchableWithoutFeedback onPress={handleShowList}>
          <Icon name={'list'} size={30} color={!showSummary ? colors.greyDark : colors.greyLight} />
        </TouchableWithoutFeedback>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginLeft: '45%',
    marginVertical: responsiveHeight(2),
  },

  sortContainer: {
    flex: 1.2,
    borderRightWidth: 1,
    borderRightColor: colors.greyLight,
    marginRight: 5,
    paddingRight: 3,
  },

  sortContent: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-evenly',
  },

  sortText: {
    color: colors.greyDark,
    fontSize: responsiveFontSize(1.875),
    fontFamily: 'Lato-Regular',
  },

  viewContent: {
    flex: 0.8,
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    alignItems: 'center',
  },
});

export default SortAndView;