import React from 'react';
import { useSelector } from 'react-redux';
import { motion, AnimatePresence } from 'framer-motion';
import TodoItem from './TodoItem';
import styles from '../styles/modules/app.module.scss';

const container = {
  hidden: { opacity: 1 },
  visible: {
    opacity: 1,
    scale: 1,
    transition: {
      staggerChildren: 0.2,
    },
  },
};

const child = {
  hidden: { y: 20, opacity: 0 },
  visible: { y: 0, opacity: 1 },
};

function AppContent() {
  const todoList = useSelector((state) => state.todo.todoList);
  console.log(todoList);
  const filterStatus = useSelector((state) => state.todo.filterStatus);
  const filterTT = useSelector((state) => state.todo.filterTT);
  const sortedTodoList = [...todoList];
  sortedTodoList.sort((a, b) => new Date(b.time) - new Date(a.time));
  const filteredTodoList = sortedTodoList.filter((item) => {
    // need to deal with case where both are true
    if (filterTT !== '' && filterStatus !== 'all') {
      return item.tasktype === filterTT && item.status === filterStatus;
    }
    if (filterTT !== '') {
      return item.tasktype === filterTT;
    }
    if (filterStatus !== 'all') {
      return item.status === filterStatus;
    }
    return true;
  });
  return (
    <motion.div
      className={styles.content__wrapper}
      variants={container}
      initial="hidden"
      animate="visible"
    >
      <AnimatePresence>
        {filteredTodoList && filteredTodoList.length > 0 ? (
          filteredTodoList.map((todo) => (
            <TodoItem key={todo.key} todo={todo} />
          ))
        ) : (
          <motion.p className={styles.emptyText} variants={child}>
            'no todo found'
          </motion.p>
        )}
      </AnimatePresence>
      <div>
        <p>This is app was developed by Michelle (Chelle) D. Davies.</p>
        <p>
          <a href="https://www.linkedin.com/in/michelle-d-davies">LinkedIn</a> |{' '}
          <a href="https://michelledominiquedavies.info/">Website</a>
        </p>
      </div>
    </motion.div>
  );
}

export default AppContent;