import React, { useEffect, useState } from "react";
import { Container, Dropdown, Row, Col, Card } from "react-bootstrap";
import CourseThroughYearsLineChart from "./CourseThroughYearsLineChart";
import InstructorHistoryLineChart from "./InstructorHistoryLineChart";
import SectionsBarChart from "./SectionsBarChart";
import TopByAvgInstructorsBarChart from "./TopByAvgInstructorsBarChart";
import TopCoursesByDeptLineChart from "./TopCoursesByDeptLineChart";
import TopDeptBarChart from "./TopDeptBarChart";
import TopInstructorPerCourseLineChart from "./TopInstructorPerCourseLineChart";
import TopByAvgCoursesBarChart from "./TopByAvgCoursesBarChart";
import SearchableDropdownDept from "./SearchableDropdownDept";
import SearchableDropdownId from "./SearchableDropdownId";
import SearchableDropdownInstructor from "./SearchableDropdownInstructor";
import SearchableDropdownYear from "./SearchableDropdownYear";

const InsightsChoices: React.FC<{ datasetId: string; orderDir: string }> = ({ datasetId, orderDir }) => {
  const [selectedOption, setSelectedOption] = useState<string>("Course Through Years");
  const [dropYear, setDropYear] = useState<string>("Year");
  const [dropDept, setDropDept] = useState<string>("Subject");
  const [dropID, setDropId] = useState<string>("Course#");
  const [dropInstructor, setDropInstructor] = useState<string>("Instructor");

  useEffect(() => {
    setDropYear("Year");
    setDropDept("Subject");
    setDropId("Course#");
    setDropInstructor("Instructor");
  }, [selectedOption]);

  const componentMap: { [key: string]: React.FC } = {
    "Course Through Years": () => (
      <CourseThroughYearsLineChart dir={orderDir} chartId={datasetId} queryDept={dropDept} queryId={dropID} />
    ),
    "Instructor History": () => (
      <InstructorHistoryLineChart dir={orderDir} chartId={datasetId} queryInstructor={dropInstructor} />
    ),
    "Sections": () => (
      <SectionsBarChart dir={orderDir} chartId={datasetId} queryDept={dropDept} queryId={dropID} queryYear={dropYear} />
    ),
    "Top By Avg Courses": () => <TopByAvgCoursesBarChart dir={orderDir} chartId={datasetId}  />,
    "Top By Avg Instructors": () => <TopByAvgInstructorsBarChart dir={orderDir} chartId={datasetId}  />,
    "Top Courses By Dept": () => <TopCoursesByDeptLineChart dir={orderDir} chartId={datasetId} queryDept={dropDept}  />,
    "Top Dept": () => <TopDeptBarChart dir={orderDir} chartId={datasetId}  />,
    "Top Instructor Per Course": () => (
      <TopInstructorPerCourseLineChart dir={orderDir} chartId={datasetId} queryDept={dropDept} queryId={dropID}  />
    ),
  };

  const SelectedComponent = componentMap[selectedOption] || null;

  return (
    <Container fluid className="mt-0 px-0">
      <Card className="p-3 shadow-sm">
        <Row className="mb-2">
          <Col>
            <h2 className="fs-2 fw-bold text-start">Insights</h2>
          </Col>
        </Row>

        <Row className="align-items-center">
          {/* Fix resposiveness */}
          <Col xs={12} className="d-flex align-items-center" style={{ minWidth: "800px" }}>
            <Dropdown onSelect={(eventKey) => setSelectedOption(eventKey || "Component A")}>
              <Dropdown.Toggle variant="primary">{selectedOption}</Dropdown.Toggle>
              <Dropdown.Menu>
                {Object.keys(componentMap).map((option, index) => (
                  <Dropdown.Item key={index} eventKey={option}>
                    {option}
                  </Dropdown.Item>
                ))}
              </Dropdown.Menu>
            </Dropdown>

            <div style={{ width: "40px" }} />
                {/* Fix resposiveness */}
            <div className="d-flex flex-wrap gap-2 justify-content-end" style={{ flexGrow: 1, minWidth: "500px", flexWrap: "nowrap", minHeight: "45px" }}>
              {selectedOption === "Sections" && (
                <SearchableDropdownYear id={datasetId} dir={orderDir} selectedOption={dropYear} setSelectedOption={setDropYear} />
              )}
              {["Course Through Years", "Sections", "Top Courses By Dept", "Top Instructor Per Course"].includes(selectedOption) && (
                <SearchableDropdownDept id={datasetId} dir={orderDir} selectedOption={dropDept} setSelectedOption={setDropDept} setId={setDropId} />
              )}
              {["Course Through Years", "Sections", "Top Instructor Per Course"].includes(selectedOption) && (
                <SearchableDropdownId id={datasetId} queryDept={dropDept} dir={orderDir} selectedOption={dropID} setSelectedOption={setDropId} />
              )}
              {selectedOption === "Instructor History" && (
                <SearchableDropdownInstructor id={datasetId} dir={orderDir} selectedOption={dropInstructor} setSelectedOption={setDropInstructor} />
              )}
            </div>
          </Col>
        </Row>
      </Card>

      {/* Fix resposiveness */}
      <Card className="p-4 shadow-sm mt-3" style={{ minHeight: "800px", display: "flex", alignItems: "center", justifyContent: "center" }}>
        {datasetId !== "" ? (
          <div className="chart-container" style={{ width: "100%", height: "100%" }}>
            <SelectedComponent />
          </div>
        ) : (
          <h3 className="text-muted fw-bold">Choose or add dataset first</h3>
        )}
      </Card>
    </Container>
  );
};

export default React.memo(InsightsChoices);