import * as SelectRadix from '@radix-ui/react-select';
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
import { useState } from 'react';
import { Link } from 'react-router';
import { toast } from 'sonner';

export function RadixForm() {
  const [email, setEmail] = useState('m@example.com');

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    toast({
      title: 'You submitted the following values (Radix):',
      description: (
        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
          <code className="text-white">
            {JSON.stringify({ email }, null, 2)}
          </code>
        </pre>
      ),
    });
  }

  return (
    <form onSubmit={handleSubmit} className="w-2/3 space-y-6">
      <div>
        <label className="block text-sm font-medium text-gray-700">
          Email (Radix Select)
        </label>
        <SelectRadix.Root value={email} onValueChange={setEmail}>
          <SelectRadix.Trigger
            className="RadixSelectTrigger"
            aria-label="Email"
          >
            <SelectRadix.Value placeholder="Select a verified email to display" />
            <SelectRadix.Icon className="RadixSelectIcon">
              <ChevronDownIcon />
            </SelectRadix.Icon>
          </SelectRadix.Trigger>
          <SelectRadix.Portal>
            <SelectRadix.Content className="RadixSelectContent">
              <SelectRadix.ScrollUpButton className="RadixSelectScrollButton">
                <ChevronUpIcon />
              </SelectRadix.ScrollUpButton>
              <SelectRadix.Viewport className="RadixSelectViewport">
                <SelectRadix.Item
                  className="RadixSelectItem"
                  value="m@example.com"
                >
                  <SelectRadix.ItemText>m@example.com</SelectRadix.ItemText>
                  <SelectRadix.ItemIndicator className="RadixSelectItemIndicator">
                    <CheckIcon />
                  </SelectRadix.ItemIndicator>
                </SelectRadix.Item>
                <SelectRadix.Item
                  className="RadixSelectItem"
                  value="m@google.com"
                >
                  <SelectRadix.ItemText>m@google.com</SelectRadix.ItemText>
                  <SelectRadix.ItemIndicator className="RadixSelectItemIndicator">
                    <CheckIcon />
                  </SelectRadix.ItemIndicator>
                </SelectRadix.Item>
                <SelectRadix.Item
                  className="RadixSelectItem"
                  value="m@support.com"
                >
                  <SelectRadix.ItemText>m@support.com</SelectRadix.ItemText>
                  <SelectRadix.ItemIndicator className="RadixSelectItemIndicator">
                    <CheckIcon />
                  </SelectRadix.ItemIndicator>
                </SelectRadix.Item>
              </SelectRadix.Viewport>
              <SelectRadix.ScrollDownButton className="RadixSelectScrollButton">
                <ChevronDownIcon />
              </SelectRadix.ScrollDownButton>
            </SelectRadix.Content>
          </SelectRadix.Portal>
        </SelectRadix.Root>
        <p className="mt-2 text-sm text-gray-500">
          You can manage email addresses in your{' '}
          <Link to="/examples/forms" className="text-blue-600 hover:underline">
            email settings
          </Link>
          .
        </p>
      </div>
      <button type="submit">Submit</button>
    </form>
  );
}

export default function Test() {
  return (
    <div className="space-y-12 p-4">
      <div>
        <h2>Radix Form</h2>
        <RadixForm />
      </div>
    </div>
  );
}