import { Route, Routes } from "react-router-dom";
// import { PrimaryButton } from "./components/button/PrimaryButton";
// import { SecondaryButton } from "./components/button/SecondaryButton";
// import { Checkbox } from "./components/checkbox/Checkbox";
// import { Input } from "./components/input/Input";
// import { Switch } from "./components/switch/Switch";
import Home from "./pages/Home";
import CodeEditor from "./views/problem/codeeditor/CodeEditor";

function App() {
  return (
    <div className="flex w-full h-full ">
      <Routes>
        <Route path="/home/*" element={<Home/>}/>
        <Route path="/editor" element={<div className="box-border p-[50px] w-full h-[800px] relative bg-red-800"><CodeEditor/></div>}/>
        <Route path="*" element={<Home/>}/>
      </Routes>

      {/* <Switch
        className=" fixed top-0 left-0 z-full"
        variant="theme"
        color="secondary"
        onChange={(state: boolean) => {
          document.documentElement.setAttribute(
            "data-theme",
            state ? "dark" : "light"
          );
        }}
      />
      <div className="">
        <Input
          id="first_name"
          label="Фамилия"
          variant="bordered"
          //placeholder="test"
          radius="sm"
          className="m-2"
          required
          onChange={(state: string) => {
            console.log(state);
          }}
        />
        <Input
          variant="flat"
          id="given_name"
          label="Имя"
          //placeholder="test"
          radius="sm"
          className="m-2"
          required
          onChange={(state: string) => {
            console.log(state);
          }}
        />
        <Input
          variant="faded"
          type="email"
          label="Почта"
          radius="sm"
          className="m-2"
          required
          onChange={(state: string) => {
            console.log(state);
          }}
        />
        
        <Input
          labelType="in-fixed"
          type="password"
          label="Пароль"
          radius="sm"
          className="m-2"
          required
          onChange={(state: string) => {
            console.log(state);
          }}
        />
        <Checkbox onChange={() => { }} label="test" color="default" defaultState={true}/>
        <Checkbox onChange={() => { }} label="test" color="primary" defaultState={true}/>
        <Checkbox onChange={() => { }} label="test" color="secondary" defaultState={true}/>
        <Checkbox onChange={() => { }} label="test" color="success" defaultState={true}/>
        <Checkbox onChange={() => { }} label="test" color="warning" defaultState={true}/>
        <Checkbox onChange={() => { }} label="test" color="danger" defaultState={true}/>
        <Switch onChange={() => { }} color="default" defaultState={true}/>
        <Switch onChange={() => { }} color="primary" defaultState={true}/>
        <Switch onChange={() => { }} color="secondary" defaultState={true}/>
        <Switch onChange={() => { }} color="success" defaultState={true}/>
        <Switch onChange={() => { }} color="warning" defaultState={true}/>
        <Switch onChange={() => { }} color="danger" defaultState={true}/>


        <div className="grid grid-rows-3 grid-cols-2 grid-flow-col">

          <PrimaryButton onClick={() => { }} text="Button" className="m-5" />
          <PrimaryButton onClick={() => { }} text="Button" className="m-5" />
          <PrimaryButton onClick={() => { }} text="Button" disabled className="m-5" />
          <SecondaryButton onClick={() => { }} text="Button" className="m-5" />
          <SecondaryButton onClick={() => { }} text="Button" className="m-5" />
          <SecondaryButton onClick={() => { }} text="Button" disabled className="m-5" />
        </div>
      </div>
      <div className="w-full"></div> */}
    </div>
  );
}

export default App;