"use client";

import { useState } from "react";
import ThreeInput, {
  ThreeInputItem,
} from "../common/components/ThreeInput/index";
import { mockData } from "../common/components/ThreeInput/mock";
import { DocumentType } from "../common/components/SelectCard/DocumentTypeSelectCard";
import Typography from "../common/components/Typography";

const Home = () => {
  const items: ThreeInputItem[] = mockData;

  // 학기 선택
  const [year, setYear] = useState<number>(items[0].year);
  const [isSpring, setIsSpring] = useState<boolean>(items[0].value.isSpring);

  // 문서 유형 선택
  const [type, setType] = useState<DocumentType>(DocumentType.BudgetProposal);

  // 조직 유형 선택
  const [selectedKey, setSelectedKey] = useState<string>(""); // CHACHA: TODO: enum으로 변경
  const [selectedValue, setSelectedValue] = useState<string>(""); // CHACHA: TODO: enum으로 변경

  return (
    <>
      <div>Welcome to SPARCS Students!</div>
      <Typography>
        {year} {isSpring ? "봄" : "가을"} {type} {selectedKey} {selectedValue}
      </Typography>
      <ThreeInput
        itemList={items}
        year={year}
        setYear={setYear}
        isSpring={isSpring}
        setIsSpring={setIsSpring}
        type={type}
        setType={setType}
        selectedKey={selectedKey}
        setSelectedKey={setSelectedKey}
        selectedValue={selectedValue}
        setSelectedValue={setSelectedValue}
      />
    </>
  );
};
export default Home;