Select

function SelectDemo() {
  const severities = [
    { label: "Critical", value: "critical" },
    { label: "High", value: "high" },
    { label: "Medium", value: "medium" },
    { label: "Low", value: "low" },
  ]

  return (
    <Select items={severities}>
      <SelectTrigger aria-label="Severity" className="w-44">
        <SelectValue placeholder="Select severity" />
      </SelectTrigger>
      <SelectContent>
        {severities.map((severity) => (
          <SelectItem key={severity.value} value={severity.value}>
            {severity.label}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  )
}

function SelectWithLabel() {
  const regions = [
    { label: "Europe (Frankfurt)", value: "eu-central" },
    { label: "United States (Virginia)", value: "us-east" },
    { label: "Asia Pacific (Singapore)", value: "ap-southeast" },
  ]

  return (
    <Field className="max-w-xs">
      <FieldLabel htmlFor="data-region">Data region</FieldLabel>
      <Select items={regions} defaultValue="eu-central">
        <SelectTrigger
          id="data-region"
          className="w-full"
          aria-describedby="data-region-description"
        >
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          {regions.map((region) => (
            <SelectItem key={region.value} value={region.value}>
              {region.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
      <FieldDescription id="data-region-description">
        Where the tenant's events and reports are stored.
      </FieldDescription>
    </Field>
  )
}

function SelectWithGroups() {
  const templates = {
    soc2: "SOC 2 Type II",
    iso27001: "ISO 27001",
    pci: "PCI DSS",
    weekly: "Weekly summary",
    incident: "Incident report",
    exposure: "External exposure",
  }

  return (
    <Select items={templates} defaultValue="weekly">
      <SelectTrigger aria-label="Report template" className="w-52">
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectLabel>Compliance</SelectLabel>
          <SelectItem value="soc2">SOC 2 Type II</SelectItem>
          <SelectItem value="iso27001">ISO 27001</SelectItem>
          <SelectItem value="pci" disabled>
            PCI DSS
          </SelectItem>
        </SelectGroup>
        <SelectSeparator />
        <SelectGroup>
          <SelectLabel>Operations</SelectLabel>
          <SelectItem value="weekly">Weekly summary</SelectItem>
          <SelectItem value="incident">Incident report</SelectItem>
          <SelectItem value="exposure">External exposure</SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  )
}

function SelectSizes() {
  const statuses = [
    { label: "Open", value: "open" },
    { label: "In progress", value: "in-progress" },
    { label: "Closed", value: "closed" },
  ]

  return (
    <>
      <Select items={statuses} defaultValue="open">
        <SelectTrigger size="sm" aria-label="Status (small)" className="w-36">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          {statuses.map((status) => (
            <SelectItem key={status.value} value={status.value}>
              {status.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
      <Select items={statuses} defaultValue="open">
        <SelectTrigger aria-label="Status" className="w-36">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          {statuses.map((status) => (
            <SelectItem key={status.value} value={status.value}>
              {status.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
      <Select items={statuses} defaultValue="open">
        <SelectTrigger size="lg" aria-label="Status (large)" className="w-36">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          {statuses.map((status) => (
            <SelectItem key={status.value} value={status.value}>
              {status.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    </>
  )
}

function SelectInvalid() {
  const analysts = [
    { label: "Dana Whitfield", value: "dana" },
    { label: "Marcus Oyelaran", value: "marcus" },
    { label: "Priya Raman", value: "priya" },
  ]

  return (
    <Field data-invalid className="max-w-xs">
      <FieldLabel htmlFor="incident-owner">Incident owner</FieldLabel>
      <Select items={analysts}>
        <SelectTrigger
          id="incident-owner"
          className="w-full"
          aria-invalid
          aria-describedby="incident-owner-error"
        >
          <SelectValue placeholder="Select an analyst" />
        </SelectTrigger>
        <SelectContent>
          {analysts.map((analyst) => (
            <SelectItem key={analyst.value} value={analyst.value}>
              {analyst.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
      <FieldError id="incident-owner-error">
        Assign an owner before escalating the incident.
      </FieldError>
    </Field>
  )
}

function SelectControlled() {
  const ranges = [
    { label: "Last 24 hours", value: "24h" },
    { label: "Last 7 days", value: "7d" },
    { label: "Last 30 days", value: "30d" },
  ]
  const [range, setRange] = React.useState<string | null>("7d")
  const selected = ranges.find((item) => item.value === range)

  return (
    <div className="grid justify-items-center gap-3">
      <Select items={ranges} value={range} onValueChange={setRange}>
        <SelectTrigger aria-label="Time range" className="w-44">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          {ranges.map((item) => (
            <SelectItem key={item.value} value={item.value}>
              {item.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
      <p className="text-sm text-text-secondary">
        Showing alerts from the {selected?.label.toLowerCase()}.
      </p>
    </div>
  )
}