"use client"

import { useState } from "react"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import { ComponentContainer } from "@/components/ui/component-container"
import { SectionHeading } from "@/components/ui/section-heading"
import { PageBreadcrumb } from "@/components/page-breadcrumb"

export function SwitchSection() {
  const [basicToggle, setBasicToggle] = useState(false)
  const [labelToggle, setLabelToggle] = useState(true)
  const [formToggle, setFormToggle] = useState(false)

  // Properties for the interactive switch
  const [switchChecked, setSwitchChecked] = useState(false)
  const [labelText, setLabelText] = useState("Enable notifications")
  const [descriptionText, setDescriptionText] = useState("Receive notifications about new updates and features")
  const [switchDisabled, setSwitchDisabled] = useState(false)

  const generateCode = (props: Record<string, any>) => {
    const { label, description, disabled } = props

    const disabledProp = disabled ? " disabled" : ""

    if (!description) {
      return `import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"

export function SwitchDemo() {
  return (
    <div className="flex items-center space-x-2">
      <Label htmlFor="switch">${label}</Label>
      <Switch id="switch"${disabledProp} />
    </div>
  )
}`
    }

    return `import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"

export function SwitchDemo() {
  return (
    <div className="flex items-center justify-between">
      <div className="space-y-0.5">
        <Label htmlFor="switch">${label}</Label>
        <div className="text-sm text-muted-foreground">
          ${description}
        </div>
      </div>
      <Switch id="switch"${disabledProp} />
    </div>
  )
}`
  }

  const renderInteractiveSwitch = (props: Record<string, any>) => {
    const { label, description, disabled } = props

    if (!description) {
      return (
        <div className="flex items-center justify-center p-6">
          <div className="flex items-center space-x-2">
            <Label htmlFor="interactive-switch">{label}</Label>
            <Switch
              id="interactive-switch"
              checked={switchChecked}
              onCheckedChange={setSwitchChecked}
              disabled={disabled}
            />
          </div>
        </div>
      )
    }

    return (
      <div className="flex items-center justify-center p-6">
        <div className="flex items-center justify-between w-full max-w-sm">
          <div className="space-y-0.5">
            <Label htmlFor="interactive-switch">{label}</Label>
            <div className="text-sm text-muted-foreground">{description}</div>
          </div>
          <Switch
            id="interactive-switch"
            checked={switchChecked}
            onCheckedChange={setSwitchChecked}
            disabled={disabled}
          />
        </div>
      </div>
    )
  }

  const switchProperties = [
    {
      name: "label",
      type: "text" as const,
      defaultValue: "Enable notifications",
      label: "Label",
      description: "Text for the label",
    },
    {
      name: "description",
      type: "text" as const,
      defaultValue: "Receive notifications about new updates and features",
      label: "Description",
      description: "Description text under the label",
    },
    {
      name: "disabled",
      type: "boolean" as const,
      defaultValue: false,
      label: "Disabled",
      description: "Whether the switch is disabled",
    },
  ]

  return (
    <section id="switch" className="scroll-mt-16">
      <PageBreadcrumb category="components" sectionName="Switch" sectionId="switch" />

      <SectionHeading
        title="Switch"
        description="A control that allows the user to toggle between checked and not checked."
      />

      <div className="space-y-8">
        <ComponentContainer
          title="Interactive Switch"
          description="Customize the switch component with different properties."
          properties={switchProperties}
          renderComponent={renderInteractiveSwitch}
          generateCode={generateCode}
        >
          <div className="flex items-center justify-center p-6">
            <div className="flex items-center space-x-2">
              <Label>Default Switch</Label>
              <Switch />
            </div>
          </div>
        </ComponentContainer>

        <ComponentContainer
          title="Default Switch"
          description="A simple switch component."
          code={`import { Switch } from "@/components/ui/switch"

export function SwitchDemo() {
  return <Switch />
}`}
        >
          <div className="flex items-center justify-center p-6">
            <Switch checked={basicToggle} onCheckedChange={setBasicToggle} />
          </div>
        </ComponentContainer>

        <ComponentContainer
          title="Switch with Label"
          description="A switch with an associated label."
          code={`import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"

export function SwitchWithLabelDemo() {
  return (
    <div className="flex items-center space-x-2">
      <Label htmlFor="airplane-mode">Airplane Mode</Label>
      <Switch id="airplane-mode" />
    </div>
  )
}`}
        >
          <div className="flex items-center justify-center p-6">
            <div className="flex items-center space-x-2">
              <Label htmlFor="airplane-mode">Airplane Mode</Label>
              <Switch id="airplane-mode" checked={labelToggle} onCheckedChange={setLabelToggle} />
            </div>
          </div>
        </ComponentContainer>

        <ComponentContainer
          title="Switch in Form"
          description="A switch used in a form context with description."
          code={`import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"

export function SwitchFormDemo() {
  return (
    <div className="flex items-center justify-between">
      <div className="space-y-0.5">
        <Label htmlFor="marketing-emails">Marketing emails</Label>
        <div className="text-sm text-muted-foreground">
          Receive emails about new products, features, and more.
        </div>
      </div>
      <Switch id="marketing-emails" />
    </div>
  )
}`}
        >
          <div className="flex items-center justify-center p-6">
            <div className="flex items-center justify-between w-full max-w-sm">
              <div className="space-y-0.5">
                <Label htmlFor="marketing-emails">Marketing emails</Label>
                <div className="text-sm text-muted-foreground">
                  Receive emails about new products, features, and more.
                </div>
              </div>
              <Switch id="marketing-emails" checked={formToggle} onCheckedChange={setFormToggle} />
            </div>
          </div>
        </ComponentContainer>

        <ComponentContainer
          title="Disabled Switch"
          description="A switch in disabled state."
          code={`import { Switch } from "@/components/ui/switch"

export function DisabledSwitchDemo() {
  return <Switch disabled />
}`}
        >
          <div className="flex items-center justify-center p-6">
            <Switch disabled />
          </div>
        </ComponentContainer>
      </div>
    </section>
  )
}