"use client";
import { Icon1 } from "@/public";
import { Icon2 } from "@/public";
import { LockIcon } from "@/public";
import { LogoIcon } from "@/public";
import { IconButton } from "@/components/ui/Button/iconButton";
import React from "react";
import { IconInput } from "@/components/ui/Input/IconInput";
import { useState, useEffect } from "react";
import { CustomCheckbox } from "@/components/ui/Checkbox/checkbox";
import { FiCheck } from "react-icons/fi";
import MultiSelectDropdown from "../../components/ui/Dropdown/MultiSelectDropdown";
import { Calendar } from "@/components/ui/Calendar/calendar";
import { DatePickerDemo } from "@/components/ui/Calendar/DatePicker";
import { DatePickerWithRange } from "@/components/ui/Calendar/DateRangePicker";
import { DatePickerWithPresets } from "@/components/ui/Calendar/DatePickerPresets";
import { Switch } from "@/components/ui/Shift/switch";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
import { Input } from "@ganesh1010/track3d-core-ui/components/ui/Input/input";

export default function page() {
  const data = [  
    { id: 1, value: "Hagoromo Otsutsuki" },
    { id: 2, value: "Kaguya Otsutsuki" },
    { id: 3, value: "Naruto Uzumaki (Six Paths Sage Mode)" },
    { id: 4, value: "Sasuke Uchiha (Rinnegan)" },
    { id: 5, value: "Madara Uchiha (Ten-Tails Jinchuriki)" },
    { id: 6, value: "Obito Uchiha (Ten-Tails Jinchuriki)" },
    { id: 7, value: "Hashirama Senju" },
    { id: 8, value: "Itachi Uchiha" },
    { id: 9, value: "Minato Namikaze (Fourth Hokage)" },
    { id: 10, value: "Orochimaru" },
    { id: 11, value: "Orochimaru" },
  ];

  const handleSelect = (selectedItems: any) => {
    console.log("Selected Items:", selectedItems);
  };

  const [date, setDate] = React.useState<Date | undefined>(new Date());
  const [date1, setDate1] = React.useState<Date | undefined>(new Date());

  useEffect(() => {
    console.log(date);
  }, [date]);

  return (
    <div>
      <div className="flex flex-row gap-2">
        <LogoIcon className="size-12 p-2  hover:bg-slate-200 hover:rounded-full" />

        <Icon1 className="size-12 p-2 hover:bg-slate-200 hover:rounded-full stroke-blue-500" />

        <LockIcon className=" size-12 stroke--600" />
      </div>

      <IconButton variant={"default"} icon={<Icon1 className="" />} />

      <IconButton
        className="ml-2"
        variant={"outline"}
        icon={<Icon1 className="" />}
      />

      <IconButton
        className="ml-2"
        variant={"none"}
        icon={<Icon1 className="" />}
      />

      <Input
        variant={"primary"}
        validation={{
          pattern: /^[0-9]+$/,
          errorMessage: "Please enter only numeric characters.",
        }}
      />

      <IconInput
        icon={<Icon2 className="size-7" />}
        validation={{
          pattern: /^[0-9]+$/,
          errorMessage: "Please enter only numeric characters.",
        }}
      />

      <CustomCheckbox></CustomCheckbox>

      <CustomCheckbox
        checkedClassName="size-5 justify-center bg-blue-400"
        uncheckedClassName="size-5 border border-blue-400"
        icon={<FiCheck />}
      ></CustomCheckbox>

      <CustomCheckbox
        disable={true}
        uncheckedClassName="size-5 bg-blue-300 border-blue-500"
      ></CustomCheckbox>
      <div className="flex flex-row gap-2">
        <MultiSelectDropdown
          onSelect={handleSelect}
          data={data}
          selectedItemsStyle="bg-blue-200"
          outlineBorderColor="hover:border-blue-500"
          checkIconColor="hover:text-blue-500"
        />

        <MultiSelectDropdown onSelect={handleSelect} data={data} />
      </div>

      <MultiSelectDropdown
        onSelect={handleSelect}
        data={data}
        displayChipsInline={false}
      />
      <div className="flex gap-2 flex-row">
        <Calendar
          mode="single"
          selected={date}
          onSelect={setDate}
        />
        <DatePickerDemo />
        <DatePickerWithPresets />
        <DatePickerWithRange />
        <Switch variant={'primary'} onChange={(isChecked:any) => console.log("Switch is toggled:", isChecked)} />
        <ScrollArea className="h-44 w-44 pr-3" variant={'primary'}>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam atque nemo voluptatem incidunt, inventore, neque quisquam, 
          qui unde quis tempora alias ducimus at ipsa itaque eos esse cumque sed cupiditate? Lorem ipsum dolor sit amet consectetur adipisicing elit. 
          Vitae sit voluptatem harum architecto quo illum rem qui autem tempora, illo, commodi beatae, earum exercitationem deleniti. 
          Nobis laudantium odit nam eos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit et incidunt consequuntur error 
          rem corporis fugit temporibus consequatur excepturi nemo ad quod, expedita asperiores minima illo assumenda nostrum ipsum? Ut!
        </ScrollArea>

      </div>
    </div>
  );
}
