Team settings

"use client";

import { Button } from "@/siteplane/components/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/siteplane/components/card";
import {
  Field,
  FieldDescription,
  FieldError,
  FieldLabel,
} from "@/siteplane/components/field";
import { Form } from "@/siteplane/components/form";
import { Input } from "@/siteplane/components/input";
import {
  Select,
  SelectItem,
  SelectLabel,
  SelectPopup,
  SelectTrigger,
  SelectValue,
} from "@/siteplane/components/select";
import {
  SettingsList,
  SettingsListItem,
} from "@/siteplane/components/settings-list";
import { Switch } from "@/siteplane/components/switch";
import { Textarea } from "@/siteplane/components/textarea";
import { useState } from "react";

export default function Example() {
  const initial = {
    name: "Acme Design",
    description: "The team behind our product experience.",
    visibility: "private",
    email: true,
    digest: false,
  };
  const [settings, setSettings] = useState(initial);
  const [saved, setSaved] = useState(initial);
  const [resetCount, setResetCount] = useState(0);
  return (
    <Form
      className="grid w-full max-w-md gap-5"
      onReset={() => {
        setSettings(saved);
        setResetCount((count) => count + 1);
      }}
      onSubmit={(event) => {
        event.preventDefault();
        const next = { ...settings, name: settings.name.trim() };
        setSettings(next);
        setSaved(next);
      }}
    >
      <Card>
        <CardHeader>
          <CardTitle>Team settings</CardTitle>
          <CardDescription>
            Manage your team profile and communication preferences.
          </CardDescription>
        </CardHeader>
        <CardContent className="grid gap-4">
          <Field
            key={resetCount}
            name="name"
            validate={(value) =>
              typeof value === "string" && value.trim()
                ? null
                : "Enter a team name."
            }
          >
            <FieldLabel>Team name</FieldLabel>
            <Input
              required
              value={settings.name}
              onChange={(event) =>
                setSettings({ ...settings, name: event.target.value })
              }
            />
            <FieldDescription>
              Shown to everyone in the workspace.
            </FieldDescription>
            <FieldError>Enter a team name.</FieldError>
          </Field>
          <Field name="description">
            <FieldLabel>Description</FieldLabel>
            <Textarea
              value={settings.description}
              onChange={(event) =>
                setSettings({ ...settings, description: event.target.value })
              }
            />
          </Field>
          <Select
            name="visibility"
            value={settings.visibility}
            onValueChange={(value) => {
              if (value) setSettings({ ...settings, visibility: value });
            }}
          >
            <SelectLabel>Visibility</SelectLabel>
            <SelectTrigger>
              <SelectValue>
                {settings.visibility === "private"
                  ? "Private team"
                  : "Everyone in the workspace"}
              </SelectValue>
            </SelectTrigger>
            <SelectPopup>
              <SelectItem value="private">Private team</SelectItem>
              <SelectItem value="workspace">
                Everyone in the workspace
              </SelectItem>
            </SelectPopup>
          </Select>
        </CardContent>
      </Card>
      <SettingsList
        title="Notifications"
        description="Choose which updates your team receives."
      >
        <SettingsListItem
          title="Email updates"
          description="Important project and membership changes."
          control={(props) => (
            <Switch
              {...props}
              checked={settings.email}
              onCheckedChange={(email) => setSettings({ ...settings, email })}
            />
          )}
        />
        <SettingsListItem
          title="Weekly digest"
          description="A summary every Monday."
          control={(props) => (
            <Switch
              {...props}
              checked={settings.digest}
              onCheckedChange={(digest) => setSettings({ ...settings, digest })}
            />
          )}
        />
      </SettingsList>
      <div className="flex flex-wrap gap-2">
        <Button type="submit">Save changes</Button>
        <Button variant="outline" type="reset">
          Reset changes
        </Button>
      </div>
    </Form>
  );
}