"use client";
import { Card, Space, Text, TextInput, rem, Select, MultiSelect, ScrollArea, Checkbox } from "@mantine/core";
import { IconSearch } from "@tabler/icons-react";
import { useState } from "react";
import FilteredStudentList from "./FilteredStudentList";
import { ProfileType } from "@prisma/client";

/* TODO: Map cs in search query to the actual COMPSCI name. so that when someone looks up cs 61c then
they are going to get the right thing. */

export default function StudentSearch({highSchools, courses, students}) {

    const icon = <IconSearch style={{ width: rem(16), height: rem(16) }} />;
    const [studentData, setStudentData] = useState(students);
    const [checked, setChecked] = useState(false);
    const [filters, setFilters] = useState({name: "", majors:[], courses:[], year: "", sex: "", relationshipStatus: "", housing: "", highSchool: "", checked: false});

    const majors = [
        "Computer Science",
        "Econometrics And Quantitative Economics",
        "Cellular And Molecular Biology",
        "Computer And Information Sciences, Other",
        "Electrical And Electronics Engineering",
        "Political Science And Government",
        "Business Administration And Management",
        "Research And Experimental Psychology",
        "Sociology",
        "Media Studies",
        "Applied Mathematics",
        "Cognitive Science",
        "Environmental Studies",
        "English Language And Literature",
        "Legal Studies",
        "Public Health",
        "Mechanical Engineering",
        "Social Sciences",
        "Biology",
        "Chemistry",
        "Statistics",
        "History",
        "International Studies",
        "Civil Engineering",
        "Chemical Engineering",
        "Anthropology",
        "Nutrition Sciences",
        "Conservation",
        "Physics",
        "Mathematics",
        "Bioengineering And Biomedical Engineering",
        "Social Work",
        "Philosophy",
        "Environmental Science",
        "Film Studies",
        "Ethnic Studies",
        "Operations Research",
        "Linguistics",
        "Interdisciplinary Studies",
        "Hispanic And Latin American Languages, Literatures, And Linguistics",
        "Fine Arts",
        "Rhetoric And Composition",
        "American Studies",
        "Astrophysics",
        "Microbiology",
        "Art History, Criticism And Conservation",
        "Music",
        "Women's Studies",
        "Materials Science",
        "Natural Resources Conservation And Research",
        "Theatre Arts",
        "Comparative Literature",
        "Urban Studies",
        "Architecture",
        "Engineering Science",
        "French Language And Literature",
        "Landscape Architecture",
        "Chicano Studies",
        "Classical, Ancient Mediterranean And Near Eastern Studies And Archaeology",
        "African-American",
        "Engineering",
        "Botany",
        "Oceanography, Chemical And Physical",
        "Applied Physics",
        "Foreign Languages, Literatures, And Linguistics",
        "Nuclear Engineering",
        "Japanese Language And Literature",
        "Asian Studies",
        "Environmental Health Engineering",
        "Slavic Languages, Literatures, And Linguistics",
        "Forest Sciences And Biology",
        "Dance",
        "German Language And Literature",
        "Middle Eastern And Semitic Languages, Literatures, And Linguistics",
        "Geology",
        "Geophysics And Seismology",
        "Chinese Language And Literature",
        "Classics And Classical Languages, Literatures, And Linguistics",
        "Italian Language And Literature",
        "Latin Language And Literature",
        "Peace Studies And Conflict Resolution",
        "Planetary Astronomy And Science",
        "Atmospheric Sciences And Meteorology",
        "East Asian Languages, Literatures, And Linguistics",
        "Scandinavian Languages, Literatures, And Linguistics"
        ];

    const sexText = {
        MALE: 'Male',
        FEMALE: 'Female',
      };

      const relationshipStatusText = {
        SINGLE: 'Single',
        IN_RELATIONSHIP: 'In a Relationship',
        PREFER_NOT_TO_SAY: 'Prefer Not to Say',
      };

      const yearText = {
        FRESHMEN: 'Freshman',
        SOPHOMORE: 'Sophomore',
        JUNIOR: 'Junior',
        SENIOR: 'Senior',
      };

      const locationText = {
        UNIT_1: 'Unit 1',
        UNIT_2: 'Unit 2',
        UNIT_3: 'Unit 3',
        CLARK_KERR: 'Clark Kerr',
        BLACKWELL: 'Blackwell',
        OFF_CAMPUS: 'Off Campus',
        PEOPLES_PARK: "People's Park"
      };

    const handleNameChange = (event) => {
        setFilters({ ...filters, name: event.target.value });
    };

    const handleMajorChange = (selectedMajors) => {
        setFilters({...filters, majors: selectedMajors});
    };

    const handleCourseChange = (selectedCourseNames) => {
        setFilters({...filters, courses: selectedCourseNames});
    };

    const handleYearChange = (selectedYear) => {
        setFilters({ ...filters, year: selectedYear });
    };

    const handleSexChange = (selectedSex) => {
        setFilters({ ...filters, sex: selectedSex });
    };

    const handleRelationshipChange = (selectedRelationship) => {
        setFilters({ ...filters, relationshipStatus: selectedRelationship });
    };

    const handleHousingChange = (selectedHousing) => {
        setFilters({ ...filters, housing: selectedHousing });
    };

    const handleHighSchoolChange = (selectedHighSchool) => {
        setFilters({ ...filters, highSchool: selectedHighSchool });
    };

    const handleAnonymousUsersCheckbox = (event) => {
        setFilters({...filters, checked: event.currentTarget.checked})
        setChecked(event.currentTarget.checked)
    };

    function capitalizeWords(str) {
        return str
          .toLowerCase()
          .split(' ')
          .map(word => word.charAt(0).toUpperCase() + word.slice(1))
          .join(' ');
      }


    const filteredData = studentData.filter(item => {
        return (filters.name ? item.name.toLowerCase().includes(filters.name.toLowerCase()) : true) &&
        (filters.majors.length > 0 ? filters.majors.every(major => item.majors.includes(major)) : true) &&
        (filters.courses.length > 0 ? filters.courses.every(course => item.courses.includes(course)) : true) &&
        (filters.year ? item.year === filters.year : true) &&
        (filters.sex ? item.sex === filters.sex : true) &&
        (filters.relationshipStatus ? item.relationshipStatus === filters.relationshipStatus : true) &&
        (filters.housing ? item.housing === filters.housing: true) &&
        (filters.highSchool ? item.high_school === filters.highSchool: true) &&
        (filters.checked ? true : item.profileType === ProfileType.PUBLIC);
    });

    return (
        <>
            <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: '10px', paddingRight:'10px'}}>
                <ScrollArea>
                    <Card p={20} w="100%" h={"100%"} bg="var(--color-component)">
                        <Text size="xl" fw={600}>Search</Text>
                        <Space w="xl" />

                        <Checkbox py={'12px'} fw={500} label={"Include Anonymous Users"} checked={checked} onChange={handleAnonymousUsersCheckbox}>
                        </Checkbox>

                        <TextInput
                            my='10px'
                            label="Name"
                            leftSectionPointerEvents="none"
                            leftSection={icon}
                            placeholder="Search by name"
                            value={filters.name}
                            onChange={handleNameChange}
                        />

                        <MultiSelect
                            label="Majors"
                            value={filters.majors}
                            onChange={handleMajorChange}
                            placeholder="Pick value"
                            data={majors}
                            searchable
                        />

                        <MultiSelect
                            label="Courses (EX: COMPSCI 61A)"
                            value={filters.courses}
                            onChange={handleCourseChange}
                            placeholder="Pick value"
                            limit={15}
                            data={courses}
                            searchable
                        />

                        <Select
                            w={"100%"}
                            label="Class Year"
                            onChange={handleYearChange}
                            data={Object.keys(yearText).map((key) => ({
                            value: key,
                            label: yearText[key],
                            }))}
                        />

                        <Select
                            w={"100%"}
                            label={"Sex"}
                            onChange={handleSexChange}
                            data={Object.keys(sexText).map((key) => ({
                            value: key,
                            label: sexText[key],
                            }))}
                        />


                        <Select
                            w={"100%"}
                            label={"Relationship Status"}
                            onChange={handleRelationshipChange}
                            data={Object.keys(relationshipStatusText).map((key) => ({
                            value: key,
                            label: relationshipStatusText[key],
                            }))}
                        />


                        <Select
                            w={"100%"}
                            label={"Housing Situation"}
                            onChange={handleHousingChange}
                            data={Object.keys(locationText).map((key) => ({
                            value: key,
                            label: locationText[key],
                            }))}
                        />

                        <Select
                            w={"100%"}
                            label={"High School"}
                            onChange={handleHighSchoolChange}

                            data={highSchools.map(highSchool => capitalizeWords(highSchool))}
                            placeholder="Pick value"
                            limit={25}
                            value={filters.highSchool}
                            searchable
                        />


                        {/* <Select
                            my='10px'
                            label="Department"
                            placeholder="Pick a category"
                            data={departments}
                            value={filters.department}
                            onChange={handleDepartmentChange}
                            searchable
                        /> */}
                    </Card>
                </ScrollArea>
            </div>

            <div style={{ flex: 1, paddingRight:'10px'}}>
                <FilteredStudentList data={filteredData}/>
                {/* <FilteredCourseList data={filteredData} /> */}
            </div>
        </>
    );
}