"use client";
import { useEffect, useState } from "react";
import { Button } from "@/components/ui/Button/button";
import { Input } from "@/components/ui/Input/input";
import { PasswordInput } from "@/components/ui/Input/PasswordInput";
import { EmailInput } from "@/components/ui/Input/EmailInput";
import { LogoIcon } from "../public/index";
import SingleSelectDropdown from "@/components/ui/Dropdown/SingleSelectDropdown";
import { Label } from "@/components/ui/label";
import { Avatar } from "@/components/ui/avatar";
import { Slider } from "@/components/ui/slider";
import { Icon2 } from "@/public";
import { Skeleton } from "@/components/ui/skeleton";
import { TooltipProvider } from "@/components/ui/tooltip";
import { LockIcon } from "lucide-react";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";

import { BreadcrumbResponsive } from "@/components/ui/Breadcrumb/Brdcrb";

export default function Home() {
  const [selectedOption, setSelectedOption] = useState<{
    id: any;
    value: any;
  } | null>(null);

  const handleSelect = (selectedItem: { id: any; value: string }) => {
    setSelectedOption(selectedItem);
  };

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

  const yourData = [
    { id: 1, value: "Hagoromo Otsutsuki" },
    { id: 2, value: "Kaguya Otsutsuki" },
    { id: 3, value: "Naruto Uzumaki (Six Paths Sage Mode)" },
  ];

  const items = [
    { href: "#", label: "Item 1" },
    { href: "#", label: "Item 2" },
    { href: "#", label: "Item 3" },
    { href: "#", label: "Item 4" },
    { href: "#", label: "Item 5" },
    { href: "#", label: "Item 6" },
    { href: "#", label: "Item 7" },
    { href: "#", label: "Item 8" },
    { href: "#", label: "Item 9" },
    { href: "#", label: "Item 10" },
    { href: "#", label: "Item 11" },
    { href: "#", label: "Item 12" },
    { href: "#", label: "Item 13" }
  ];

  const [state , setState] = useState('')
  
  const handleOptionSelect = (label:any) => {
    setState(label)
  };

  useEffect(() => {
    console.log("Selected Option : " , state)
    
  }, [state])
  
  return (
    <div className="ml-12">
      <div className="flex flex-col gap-2">
        <Input variant="primary" placeholder="Enterhere..." />

        <EmailInput
          iconPath={"/logo.svg"}
          iconClasses="h-8 w-8"
          validation={{
            pattern:
              /^[a-zA-Z0-9.!#$%&'+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)$/,
            errorMessage: "Invalid Email Address. Please check again",
          }}
          variant={"primary"}
        />

        <EmailInput
          validation={{
            pattern:
              /^[a-zA-Z0-9.!#$%&'+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)$/,
            errorMessage: "Invalid Email Address. Please check again",
          }}
          variant={"primary"}
        />

        <PasswordInput
          validations={[
            {
              pattern: /^(?=.*[a-z]).+$/,
              errorMessage: "Must contain at least one lowercase letter",
            },
            {
              pattern: /^(?=.*[A-Z]).+$/,
              errorMessage: "Must contain at least one uppercase letter",
            },
            {
              pattern: /^(?=.*\d).+$/,
              errorMessage: "Must contain at least one digit",
            },
            {
              pattern: /^(?=.*[!@#$%^&*(),.?":{}|<>]).+$/,
              errorMessage: "Must contain at least one special character",
            },
            {
              pattern: /^.{8,14}$/,
              errorMessage: "Must be in between 8-14 characters",
            },
          ]}
        />

        <PasswordInput
          validations={[
            {
              pattern: /^(?=.*[a-z]).+$/,
              errorMessage: "Must contain at least one lowercase letter",
            },
            {
              pattern: /^(?=.*[A-Z]).+$/,
              errorMessage: "Must contain at least one uppercase letter",
            },
            {
              pattern: /^(?=.*\d).+$/,
              errorMessage: "Must contain at least one digit",
            },
            {
              pattern: /^(?=.*[!@#$%^&*(),.?":{}|<>]).+$/,
              errorMessage: "Must contain at least one special character",
            },
            {
              pattern: /^.{8,14}$/,
              errorMessage: "Must be in between 8-14 characters",
            },
          ]}
          iconPath={"/lock.svg"}
          iconClasses="h-6 w-6"
        />
      </div>
      <div className="flex flex-row gap-4">
        <Button variant="outline" className="mt-2">
          Click me
        </Button>

        <Button variant="default" className="mt-2">
          Click me
        </Button>
      </div>
      <div className="flex flex-row gap-2">
        <div>
          <SingleSelectDropdown
            onSelect={handleSelect}
            data={yourData}
            size={"default"}
            outlineVariant={"primary"}
            sizeClass="w-96"
            selectedItemStyle="border border-cyan-600 hover:bg-cyan-100"
          />
          <div className="bg-pink-200 rounded-md mt-2">
            <h1>Any Component Under the Dropdown</h1>
          </div>
        </div>

        <SingleSelectDropdown onSelect={handleSelect} />

        <Label
          variant={"red"}
          size={"lg"}
          className="flex flex-row gap-2 items-center"
        >
          <LockIcon className=" size-4 stroke--600" />
          Hello
        </Label>

        <Avatar
          fallbackText="SD"
          src="https://github.com/shadcn.png"
          variant={"rounded"}
        ></Avatar>
      </div>
      <Slider
        defaultValue={[33]}
        max={100}
        step={1}
        className="w-96 mt-2"
        variant={"orange"}
        thumb={"orange"}
        track={"orange"}
      />
      <Slider
        defaultValue={[33]}
        max={100}
        step={1}
        className="w-96 mt-2"
        variant={"slate"}
        thumb={"slate"}
        track={"slate"}
      />

      <Skeleton
        className="w-[20px] h-[20px] rounded-full mt-10"
        color="default"
      />

      <TooltipProvider
        trigger={
          <Avatar
            fallbackText="SD"
            src="https://github.com/shadcn.png"
            variant={"rounded"}
          ></Avatar>
        }
        content={{
          email: (
            <Label size={"sm"} className="flex flex-row gap-1 items-center">
              <LockIcon className=" size-4" />
              abc@gmail.com
            </Label>
          ),
          fullName: (
            <Label size={"sm"} className="flex flex-row gap-1 items-center">
              <Icon2 className=" size-4" />
              Sri Ganesh
            </Label>
          ),
        }}
      />

      <RadioGroup
        type={"full"}
        options={[
          { id: "option-one", label: "Option One" },
          { id: "option-two", label: "Option Two" },
          { id: "option-three", label: "Option Three" },
        ]}
        onSelect={handleOptionSelect}  
        defaultValue="option-one"
      />
      <BreadcrumbResponsive items={items} ITEMS_TO_DISPLAY={5}/>
    </div>
  );
}
