"use client"

import * as React from "react"

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/registry/bases/radix/ui/card"
import { Slider } from "@/registry/bases/radix/ui/slider"
import {
  ToggleGroup,
  ToggleGroupItem,
} from "@/registry/bases/radix/ui/toggle-group"

export function RollerShades() {
  const [position, setPosition] = React.useState([50])

  const preset =
    position[0] <= 10 ? "open" : position[0] >= 90 ? "closed" : "half"

  return (
    <Card>
      <CardHeader>
        <CardTitle>Living Room</CardTitle>
        <CardDescription>Roller Shades</CardDescription>
      </CardHeader>
      <CardContent className="flex flex-col gap-4">
        <div className="flex h-32 flex-col overflow-hidden rounded-lg border bg-muted">
          <div
            className="bg-muted-foreground transition-all duration-300"
            style={{ height: `${position[0]}%` }}
          />
        </div>
        <div className="flex items-center gap-3">
          <span className="text-xs font-medium tracking-wider text-muted-foreground uppercase">
            Open
          </span>
          <Slider
            value={position}
            onValueChange={setPosition}
            max={100}
            className="flex-1"
          />
          <span className="text-xs font-medium tracking-wider text-muted-foreground uppercase">
            Close
          </span>
        </div>
      </CardContent>
      <CardFooter>
        <ToggleGroup
          type="single"
          value={preset}
          onValueChange={(value) => {
            if (value === "open") setPosition([0])
            if (value === "half") setPosition([50])
            if (value === "closed") setPosition([100])
          }}
          variant="outline"
          spacing={1}
          className="w-full"
        >
          <ToggleGroupItem value="open" className="flex-1">
            Open
          </ToggleGroupItem>
          <ToggleGroupItem value="half" className="flex-1">
            Half
          </ToggleGroupItem>
          <ToggleGroupItem value="closed" className="flex-1">
            Closed
          </ToggleGroupItem>
        </ToggleGroup>
      </CardFooter>
    </Card>
  )
}