import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import Button, { SelectButton } from './Button';
import styles from '../styles/modules/app.module.scss';
import ClassModal from './ClassModal';
import { updateStatusFilter, updateTTFilter } from '../slices/todoSlice';

function AppHeader() {
  const [modalOpen, setModalOpen] = useState(false);
  const filterStatus = useSelector((state) => state.todo.filterStatus);
  const filterTT = useSelector((state) => state.todo.filterTTStatus);
  const dispatch = useDispatch();

  const updateSFilter = (e) => {
    console.log('status filter');
    dispatch(updateStatusFilter(e.target.value));
  };

  const updateTaTyFilter = (e) => {
    console.log('task type filter');
    dispatch(updateTTFilter(e.target.value));
  };

  return (
    <div className={styles.appHeader}>
      <Button variant="primary" onClick={() => setModalOpen(true)}>
        Add Task
      </Button>
      <SelectButton id="status" value={filterStatus} onChange={updateSFilter}>
        <option value="all">ALL</option>
        <option value="incomplete">Incomplete</option>
        <option value="complete">Complete</option>
        <option value="help">Need Help</option>
      </SelectButton>
      <SelectButton id="tasktype" value={filterTT} onChange={updateTaTyFilter}>
        <option value="">SELECT TASK TYPE</option>
        <option value="Graduation Requirements">Graduation Requirements</option>
        <option value="Homework">Homework</option>
        <option value="Quiz or Unit Test">Quiz or Unit Test</option>
        <option value="Exam">Midterm or Final</option>
        <option value="Higher Education">Higher Education</option>
        <option value="Job Search">Job Search</option>
        <option value="Student Employment">Student Employment</option>
        <option value="Extracurriculars">Extracurriculars</option>
        <option value="Other">Other</option>
      </SelectButton>
      <ClassModal
        type="add"
        modalOpen={modalOpen}
        setModalOpen={setModalOpen}
      />
    </div>
  );
}

export default AppHeader;