import {Descending, Section, SortSettings, Term} from "../../interfaces";
import Card from "react-bootstrap/Card";
import DashboardCard from "./DashboardCard";
import AssignmentsTable, {AssignmentsTableColumn} from "../tables/AssignmentsTable";
import {useMemo, useState} from "react";
import SortSelect from "../input/SortSelect";
import OffcanvasDashboardCard from "./OffcanvasDashboardCard";

type MissingAssignmentCardsProps = { sections: Section[], term: Term | null }

const assignmentsTableColumns = [AssignmentsTableColumn.CLASSNAME, AssignmentsTableColumn.NAME, AssignmentsTableColumn.DUEDATE];

export default function MissingAssignmentCard({sections, term}: MissingAssignmentCardsProps) {
    const [offcanvasSort, setOffcanvasSort] = useState<SortSettings<AssignmentsTableColumn>>({
        order: Descending,
        by: AssignmentsTableColumn.DUEDATE
    });

    const missingAssignments = useMemo(() => sections
            .map(s => s.assignments) // Get assignments from sections
            .flat(1) // Turn array of arrays of assignments into an array of assignments
            .filter(a => a.score?.missing) // Filter for only missing assignments
            .sort((a, b) => a.dueDate.getTime() - b.dueDate.getTime()) // Sort by due date
        , [sections]);

    // Get 5 assignments with the most recent due date
    const assignmentsToDisplay = useMemo(() => missingAssignments
            .sort((a, b) => b.dueDate.getTime() - a.dueDate.getTime())
            .slice(0, 5)
        , [missingAssignments]);

    // Show button that displays list of all missing assignments (in offcanvas element)
    const includeOffcanvas = missingAssignments.length > 5;

    const cardBody = useMemo(() =>
        term === null
            ?
            <>
                <Card.Title>No missing assignments</Card.Title>
                <p>And I bet you're not <i>Missing</i> school either.</p>
            </>
            :
            <>
                <Card.Title>
                    {`${missingAssignments.length} missing assignment${missingAssignments.length === 1 ? '' : 's'} in ${term.title}`}
                </Card.Title>
                {missingAssignments.length === 0
                    ? <p>No missing assignments! Nice job try-hard!</p>
                    : <AssignmentsTable assignments={assignmentsToDisplay} columns={assignmentsTableColumns}
                                        sort={{order: Descending, by: AssignmentsTableColumn.DUEDATE}}/>
                }
            </>, [assignmentsToDisplay, term, missingAssignments]);

    return includeOffcanvas
        ? <OffcanvasDashboardCard offcanvasTitle="Missing Assignments" offcanvasBody={
            <>
                <SortSelect settings={offcanvasSort} setSettings={setOffcanvasSort}
                            sortByOptions={assignmentsTableColumns}/>
                <AssignmentsTable assignments={missingAssignments} columns={assignmentsTableColumns}
                                  sort={offcanvasSort}/>
            </>
        }>{cardBody}</OffcanvasDashboardCard>
        : <DashboardCard>{cardBody}</DashboardCard>
};