iGEM 2022 — Team vilnius-lithuania



import saveAs from "file-saver"
import * as React from "react"
import Article from "../components/Article"
import Button from "../components/Button"
import Layout from "../components/Layout"
import { MainHeaders } from "../components/MainHeader/types/mainHeaders"
import Texts from "../components/Texts"
import Calendar from "../pagesComponents/experiments/calendar/Calendar"
import Notebook from "../pagesComponents/experiments/notebook"

const ExperimentsPage = () => {
  const [selectedMonth, setSelectedMonth] = React.useState(0)
  const [selectedWeek, setSelectedWeek] = React.useState(0)
  const spacingClassName = "p-4 md:p-8"
  const spacingSmaller = "p-2 md:p-4"

  const handleMonthChange = (month: number) => {
    setSelectedMonth(month)
    setSelectedWeek(0)
  }

  const handleWeekChange = (week: number) => {
    setSelectedWeek(week)
  }

  const handlePreviousWeek = () => {
    if (selectedMonth === 0) {
      setSelectedWeek(selectedWeek - 1)
    }

    if (selectedMonth === 1) {
      if (selectedWeek === 0) {
        setSelectedMonth(0)
        setSelectedWeek(4)
      } else {
        setSelectedWeek(selectedWeek - 1)
      }
    }

    if (selectedMonth === 2) {
      if (selectedWeek === 0) {
        setSelectedMonth(1)
        setSelectedWeek(3)
      } else {
        setSelectedWeek(selectedWeek - 1)
      }
    }

    if (selectedMonth === 3) {
      if (selectedWeek === 0) {
        setSelectedMonth(2)
        setSelectedWeek(3)
      } else {
        setSelectedWeek(selectedWeek - 1)
      }
    }
  }

  const handleNextWeek = () => {
    if (selectedMonth === 0) {
      if (selectedWeek === 4) {
        setSelectedMonth(1)
        setSelectedWeek(0)
      } else {
        setSelectedWeek(selectedWeek + 1)
      }
    }

    if (selectedMonth === 1) {
      if (selectedWeek === 4) {
        setSelectedMonth(2)
        setSelectedWeek(1)
      } else {
        setSelectedWeek(selectedWeek + 1)
      }
    }

    if (selectedMonth === 2) {
      if (selectedWeek === 4) {
        setSelectedMonth(3)
        setSelectedWeek(1)
      } else {
        setSelectedWeek(selectedWeek + 1)
      }
    }

    if (selectedMonth === 3) {
      setSelectedWeek(selectedWeek + 1)
    }
  }

  const getSelectedWeek = (): number => {
    if (selectedMonth === 0) {
      return selectedWeek
    }

    if (selectedMonth === 1) {
      return 5 + selectedWeek
    }

    if (selectedMonth === 2) {
      return 9 + selectedWeek
    }

    if (selectedMonth === 3) {
      return 13 + selectedWeek
    }
    return 0
  }

  return (
    <Layout header={MainHeaders.Experiments}>
      <Calendar
        selectedMonth={selectedMonth}
        selectedWeek={selectedWeek}
        onMonthChange={handleMonthChange}
        onWeekChange={handleWeekChange}
      />
      <Article>
        <div className="w-full flex flex-col md:flex-row justify-between gap-2">
          <Button
            onClick={() =>
              saveAs(
                "https://static.igem.wiki/teams/4380/wiki/experiments/vilnius-lithuania-protocols-and-materials.pdf",
                "vilnius-lithuania-protocols-and-materials.pdf"
              )
            }
          >
            Download Protocols
          </Button>
          <Button
            onClick={() =>
              saveAs(
                "https://static.igem.wiki/teams/4380/wiki/experiments/vilnius-lithuania-benchling.pdf",
                "vilnius-lithuania-benchling.pdf"
              )
            }
          >
            Download Benchling
          </Button>
        </div>
        <div className={spacingClassName} />
        <Texts.Header1>Experiments notebook</Texts.Header1>
        <div className={spacingSmaller} />
        <div className="h-[70vh]">
          <Notebook
            selected={getSelectedWeek()}
            onPrevious={handlePreviousWeek}
            onNext={handleNextWeek}
          />
        </div>
        <div className={spacingClassName} />
      </Article>
    </Layout>
  )
}

export default ExperimentsPage