Select

import * as React from "react"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Label } from "@/components/ui/label"
import { cn } from "@/lib/utils"

enum Role {
  ADMIN = "ADMIN",
  SELLER = "SELLER",
  AFFILIATE = "AFFILIATE",
  USER = "USER",
}

// Basic Select component demo
export const DemoVariant1 = () => {
  const [role, setRole] = React.useState<Role | string>("")

  const roleOptions = [
    { value: Role.ADMIN, label: "Administrator" },
    { value: Role.SELLER, label: "Penjual" },
    { value: Role.AFFILIATE, label: "Affiliate" },
    { value: Role.USER, label: "Pengguna" },
  ]

  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="space-y-2">
        <Label htmlFor="role">Role</Label>
        <Select
          value={role}
          onValueChange={(value) => setRole(value as Role)}
        >
          <SelectTrigger id="role">
            <SelectValue placeholder="Pilih Role" />
          </SelectTrigger>
          <SelectContent>
            {roleOptions.map((option) => (
              <SelectItem key={option.value} value={option.value}>
                {option.label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
        <p className="text-sm text-muted-foreground">
          Selected role: {role || "None"}
        </p>
      </div>
    </div>
  )
}

// Select with validation
export const DemoVariant2 = () => {
  const [role, setRole] = React.useState<Role | string>("")
  const [error, setError] = React.useState<string>("")

  const roleOptions = [
    { value: Role.ADMIN, label: "Administrator" },
    { value: Role.SELLER, label: "Penjual" },
    { value: Role.AFFILIATE, label: "Affiliate" },
    { value: Role.USER, label: "Pengguna" },
  ]

  const handleSelect = (value: string) => {
    setRole(value as Role)
    setError("")
  }

  const validate = () => {
    if (!role) {
      setError("Role wajib dipilih")
      return false
    }
    return true
  }

  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="space-y-2">
        <Label htmlFor="role-validation">Role with Validation</Label>
        <Select
          value={role}
          onValueChange={handleSelect}
          onOpenChange={(open) => {
            if (!open) validate()
          }}
        >
          <SelectTrigger 
            id="role-validation"
            className={cn(error && "border-red-500")}
          >
            <SelectValue placeholder="Pilih Role" />
          </SelectTrigger>
          <SelectContent>
            {roleOptions.map((option) => (
              <SelectItem key={option.value} value={option.value}>
                {option.label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
        {error && (
          <p className="text-sm text-red-500">{error}</p>
        )}
      </div>
    </div>
  )
}

// Disabled Select
export const DemoVariant3 = () => {
  const roleOptions = [
    { value: Role.ADMIN, label: "Administrator" },
    { value: Role.SELLER, label: "Penjual" },
    { value: Role.AFFILIATE, label: "Affiliate" },
    { value: Role.USER, label: "Pengguna" },
  ]

  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="space-y-2">
        <Label htmlFor="role-disabled">Disabled Select</Label>
        <Select disabled>
          <SelectTrigger id="role-disabled">
            <SelectValue placeholder="Tidak tersedia" />
          </SelectTrigger>
          <SelectContent>
            {roleOptions.map((option) => (
              <SelectItem key={option.value} value={option.value}>
                {option.label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>
    </div>
  )
}